JavaScript:http库封装

485 阅读2分钟

这次项目是基于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负责状态码处理