uniapp-uni.request封装和拦截器

新建拦截器文件:httpInterceptor.js
 

// 添加拦截器
const httpInterceptor = {
	// 拦截前触发
	invoke: options=> {
		console.log('options', options)
		// if (!options.url.startsWith('http')) {
		// 	options.url = baseURL + options.url
		// }
		// 请求超时
		options.timeout = 6000
		options.header = {
			...options.header
		}
		// 添加 token 请求头标识
		// const token = uni.getStorage('token')
		// if (token) {
		//   options.header.Authorization = token
		// }
	},
	returnValue: result=>{
		console.log('rr:',result)
		//改变返回的数据结构，resolve会走uni.request().then(),reject会走uni.request().catch()
		const promise = (resolve, reject) => {
			result.then(res=>{
				console.log('returnValue',res)
				if(res.header['Content-Type'].includes('application/json')){
					if(res.data.code == 200){
						resolve({data:res.data,response:res})
					}else{
						reject({message:res.data.message,response:res})
					}
				}else{
					resolve(res)
				}
				//resolve(result)
			}).catch(err=>{
				//{errMsg: "request:fail "}
				console.log('returnValue err',err)
				reject({message: err.errMsg})
			})
		}
		console.log('returnValue1',result)
		return new Promise(promise)
	},
	success: args=> {
		 console.log('success args:',args)
		 //这里这样也可以改变返回的数据结构
		 // return new Promise((resolve)=>{
			//  resolve({data:args.data})
		 // })
	},
	fail: err=> {
		console.log('interceptor-fail', err)
	},
	complete: res=>{
		console.log('interceptor-complete', res)
	}
}

uni.addInterceptor('request', httpInterceptor)

main.js文件导入这个拦截器使其生效
 

import "@/api/config/httpInterceptor.js"

使用：
 

import {baseUrl} from '@/api/config/baseUrlConfig.js';

const login = (params)=>{
	return uni.request({
		method: 'POST',
	    url: `${baseUrl}/login`,
	    data: params,
	    header: {
	        'custom-header': 'abc'
	    },
	});
}
export {login}

uni.request中不能传入success / fail / complete，否则拦截器中的returnValue会失效

注:
uni.request中传入success / fail / complete返回的是requestTask对象，拦截器中returnValue拿到的也是requestTask对象，requestTask对象里没得返回的数据，也不能主动让其走success 或者fail

uni.request中不传入success / fail / complete返回的是Promise对象,拦截器中returnValue拿到的也是Promise 对象,能拿到返回的数据，也能决定后续走then还是catch