uni.request的封装async/await

我看有一部分人用flyio这个库封装的，但是我看了官方是支持有限：

后面关于它的封装我会再写的，这篇封装就用原生的uni.request封装，只不过原生的没有请求拦截器和响应拦截器，只能自己判断各种状态：

首先，在项目根目录下新建文件夹api和一个request.js文件：

然后这个js文件，注释已经很明白了：

// request.js

let baseURL='http://192.168.1.140:8090';
var Http = '';

// 传参：methods请求方法，params参数，urls接口，isFormData参数格式是否FormData，header请求头
Http = async function(methods, params, urls, isFormData = false, header = {}) {
	let newParams = {}
	
	//  判断参数是否是form-data
	if(params && isFormData){
		newParams = new FormData()
		for(let i in params){
			newParams.append(i,params[i])
		}
	}else{
		newParams = params
	}
	
	// 不同请求的判断  // 这里依据项目要求自行更改传参格式
	let response = {}; // 请求的返回值
	if(methods === 'put'|| methods === 'post'||methods === 'patch'){
		try{
			response =  await uni.request({method: methods, url: baseURL + urls, data: newParams, header:header})
		}catch(err){
			response = err
		}
	}else if(methods === 'delete'|| methods === 'get'){
		try{
			response =  await uni.request({method: methods, url: baseURL + urls, data: newParams, header:header})
		}catch(err){
			response = err
		}
	}
	// response 这里直接return response的话,可以拿到返回的所有请求头数据,可以打印看看,然后根据自己项目需求进行判断
	// 有点麻烦的是这里的一串判断,因为没有拦截器
	if (response[1].data.code == 1000) {
		return response[1].data; // 返回响应值
	} else {
		if (response[1].data.code == 1001) {   // 重新登陆
			uni.redirectTo({
				url: 'login'   
			})
		}
		uni.showToast({    // 显示接口返回msg
		    title: response[1].data.msg,
		    duration: 2000
		});
	}
	
}

export default Http

然后在mian.js里面引入挂载在原型下：

import Http from '@/api/request.js'
Vue.prototype.$Http = Http

然后在组件中使用：

onLoad() {
	this.getIn()
},
methods: {
	async getIn () {
		let res = await this.$Http('post', {userName: 'admin',passWord: 'admin'}, '/signIn')
		console.log(res)     // 拿到返回数据
	},
}

这打印返回数据结果如下：

就是这样啦！