这次项目是基于uniapp开发的小程序,由于后台设置的content-type不是最常用的application/json,每次发http请求时都需要写上不同的数据类型,比较麻烦,所以想封装一下,但小程序原生的http请求都是通过回调函数来处理,所以在网上找了一个封装的promise库函数使用。
这个http库的功能很完善,支持promise,包括了四种最常见的请求,文件上传,请求拦截,错误码处理。
但也由于功能强大,这个库和业务代码的耦合度很高,出现了下层对上层的调用,必须把源代码改写才能使用,好在不像深不见底的node_module,这个库的核心代码没有超过五百行,阅读起来没有很费力。 uniapp-http
文件结构
request.js//最基本的请求
构造函数request{}
requestConfig.js//基于request.js根据业务代码的封装
requestStart请求前的拦截器requestStart请求后的处理器(为了处理加载动画)
dataFactory对请求结果处理,比如,成功,未登录
最基本的请求
这里用的是class request,本质上还是一个构造函数,constructor部分是对象的私有属性,这里面的this指向都是离构造函数最近的对象,即new出来的空对象
这里都考虑了没有传对应参数时候初始默认值怎么设置,this.baseUrl = options.baseUrl || "";this.config = {
isPrompt: options.isPrompt === false ? false : true,
};``
构造函数request上的prototype上有getDefault(处理自定义信息和new request时的默认信息)getRequest(调用拦截器,然后真正请求,再调用请求后处理)post/get/put/delete(用promise对getRequest)进一步封装
其中getDefault使用了一个函数: Object.assign可以实现多对象的覆盖,接受多个参数,将后面对象的属性覆盖/添加到第一个对象上,并返回第一个对象,所以如果要保留原始的源对象的话,第一个参数要写成空对象。
还有一个ES6中的对象解构语法:
dataFactory:{
response:response,
resolve:resolve,
reject:reject
}
//dataFactory
{
response:response,
resolve:resolve,
reject:reject
}
//...dataFactory
response:response,
resolve:resolve,
reject:reject
基于业务代码的封装
var $http = new request({...(默认值:baseurl,headers...)})
requestStart负责拦截请求
requestEnd负责请求后处理
dataFactory负责状态码处理