TALL-MUI-4/utils/request.js

import store from '@/store/index.js';
import storage from '@/utils/storage.js';
import ui from '@/utils/ui.js';

export function setupHttp(app) {
	app.config.globalProperties.$u.http.setConfig({
		baseUrl: '',
		showLoading: true, // 是否显示请求中的loading
		loadingText: '玩命加载中...',
		loadingTime: 800,
		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
		// 配置请求头信息
		header: {
			'content-type': 'application/json;charset=UTF-8'
		},
	});
	
	// 请求拦截部分，如配置，每次请求前都会执行
	app.config.globalProperties.$u.http.interceptor.request = config => {
		const token = store.state.user.token || storage.getStorageSync('anyringToken');
		if (token) {
			config.header.Authorization = `Bearer ${token}`;
		}
	
		return config;
	};
	
	// 响应拦截，如配置，每次请求结束都会执行本方法
	app.config.globalProperties.$u.http.interceptor.response = res => {
		if (res.code === 200) {
			// res为服务端返回值，可能有code，result等字段
			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
			// 如果配置了originalData为true，请留意这里的返回值
			return res.data;
		} else if (res.code === 401) {
			// 假设201为token失效，这里跳转登录
			ui.showToast('验证失败，请重新登录');
			setTimeout(() => {
				// 此为uView的方法，详见路由相关文档
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}, 1500);
			return false;
		} else {
			// 如果返回false，则会调用Promise的reject回调，
			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
			return false;
		}
	};
	
	app.config.globalProperties.$u.post = (url, param = {}, header = {}) => {
		return app.config.globalProperties.$u.http.request({
			url,
			method: 'POST',
			header,
			data: {
				param
			},
		});
	};
}