基于promise封装uni.request

在使用uniapp开发应用时，往往需要调用uni.resquest发送请求。在应用相对复杂时需要对请求做统一管理，同时在每次发送请求时都要携带的参数作统一处理。使用promise对其进行封装。

uni.resquest()的基本配置

api文档

      // 接收一个对象{}作为参数。
      {
        url, // 请求地址
        data, // 请求的参数
        header, // 请求头信息
        method, // 请求方式，默认GET，大小写都可以
        timeout, // 超时时间，单位 ms
        success, // 请求成功的回调函数
        fail, // 请求失败的回调函数
        complete // 接口调用结束的回调函数
      }

发送请求的服务器地址前缀是统一的，为了方便测试及部署上线后更改，可以设置一个baseUrl。

使用promise封装

新建一个文件request.js，使用ES Model默认导出request方法

const baseUrl = "http://localhost:8080";

export default function request({
	url,method="get",data,header
}={}){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseUrl + url,
			method,
			data,
			header:{
				...header, // 使用时传入不同的请求头信息
                               type:"client" // 公共的请求头信息，token之类的
			},
			success(res){
				resolve(res)
			},
                        fail(error){
				reject(error)
			},
			complete(){
				
			}
		})
		
	})
}

注意的地方：请求数据data，当请求方式为GET时会通过查询字符串的形式拼接到url。请求数据data只能是Object/String/ArrayBuffer，当要携带其它数据类型的时候需要使用uni.uploadFile来上传文件等。

上传图片可以参考这篇文章

如何使用请求拦截器

拦截器可以对请求的结果进行统一处理，也可以在请求之前做一些事。 使用到的api是 uni.addInterceptor(api, obj) uni.removeInterceptor(api)，拦截请求就设置api参数='request'

// obj配置项
{
    invoke, // 拦截前触发
    success, // 成功回调拦截
    fail, // 失败回调拦截
    complete // 完成回调拦截
}

在管理请求时新建一个文件夹api，存放不同模块的请求方法，将请求拦截器设置到一个单独的interceptor.js文件，在api文件夹根据不同模块建立的文件中引入这个js文件。

官方给出的例子

uni.request({
    url: 'request/login', //仅为示例，并非真实接口地址。
    success: (res) => {
        console.log(res.data);
        // 打印： {code:1,...}
    }
});


uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后，修改code值为1
    args.data.code = 1
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})