微信小程序HTTP请求从0到1封装
前言
作为一个前端开发者，从最开始的js、jQuery一把梭，后来的vue、react、angular等MVVM、MVC框架，我们在开发工程中都离不开HTTP库的使用。
HTTP库
1、jQuery的$.ajax
调用了XMLHttpRequest对象，封装在相关函数在配置项中，一旦传入了必需选项，则直接调用相应的send()方法进行数据的请求
2、Axios
基于Promise的请求库，通过判断XMLHTTPRequest对象存在与否，来支持客户端和node服务端发送请求，封装的很不错的HTTP库，支持promise、拦截请求和响应等
小程序网络请求
wx.request({
url:'test.php',//仅为示例，并非真实的接口地址
data:{
x:'',
y:''
},
header:{
'content-type':'application/json'//默认值
},
success(res){
console.log(res.data)
}
})
小程序本身的请求已经封装的很不错了，使用起来和$.ajax相似，支持许多配置项的设置，但是缺少公共配置、响应和请求拦截等实用功能
第一步--创建请求实例
classAxios{
constructor(){
this.instance=null//类的实例
this.config=defaultConfig
}
create(instanceConfig){
const{config}=this
//创建实例的时候添加基本配置
this.config={
...config,
...instanceConfig
}
returnthis
}
//单例
staticgetInstance(){
if(!this.instance){
this.instance=newAxios()
}
returnthis.instance
}
}
创建实例
constaxios=Axios.getInstance()
promise包装小程序请求
constdispatchRequest=function(config){
returnnewPromise((resolve,reject)=>{
wx.request({
...config,
url:config.base+config.url,
success:res=>{
resolve(res)
},
fail:res=>{
reject(res)
}
})
})
}
给请求实例添加request方法
request(options){
const{config}=this
//实例请求的时候添加基本配置
constrequsetOptions={
...config,
...options
}
returndispatchRequest(requsetOptions)
}
第二步--创建请求工具方法
创建实例，通过create设置基本配置项
constinstance=(config={})=>{
returnaxios.create({
base:globalApi,
...config
})
}
创建请求工具方法，执行实例request
exportfunctionrequest(options){
const{baseConfig,url,method,data,isLogin}=options
instance(baseConfig)
.request({
url,
method:method||'GET',
data
})
.then(res=>{
options.success&&options.success(res)
})
.catch(err=>{
if(options.error){
options.error(err)
}else{
errAlert()
}
})
}
}
这样，一个请求的工具方法就完成了，但是这个方法现在只支持基本的请求和基本配置项的配置，还是缺少我们很常用的公共请求和响应的拦截。
第三部--添加请求和响应的拦截器
创建拦截器实例
classInterceptorManager{
constructor(){
this.fulfilled=null
this.rejected=null
}
use(fulfilled,rejected){
this.fulfilled=fulfilled
this.rejected=rejected
}
}
在请求实例的构造方法中添加请求和响应拦截实例
constructor(){
this.instance=null//类的实例
this.config=defaultConfig
this.interceptors={
request:newInterceptorManager(),
response:newInterceptorManager()
}
}
在实例的request添加promise执行队列
request(options){
const{config,interceptors}=this
//实例请求的时候添加基本配置
constrequsetOptions={
...config,
...options
}
constpromiseArr=[]//promise存储队列
//请求拦截器
promiseArr.push({
fulfilled:interceptors.request.fulfilled,
rejected:interceptors.request.rejected
})
//请求
promiseArr.push({
fulfilled:dispatchRequest,
rejected:null
})
//回调拦截器
promiseArr.push({
fulfilled:interceptors.response.fulfilled,
rejected:interceptors.response.rejected
})
letp=Promise.resolve(requsetOptions)
promiseArr.forEach(ele=>{
p=p.then(ele['fulfilled'],ele['rejected'])
})
returnp
}
在请求工具方法中通过设置请求和响应的拦截方法
axios.interceptors.request.use(
request=>{
returnrequest
},
err=>{
console.error(err)
}
)
axios.interceptors.response.use(
response=>{
returnresponse
},
err=>{
console.error(err)
}
)
在请求拦截方法里面可以添加数据转换，在请求头部添加sign、token等，在响应拦截方法里面去做公共的数据处理等
最后
从零搭建一个简单的请求库很简单，但是想考虑的方方面面，设计好整个流程会比较麻烦，需要不断的改进和重构，本文的搭架过程参考了Axios的部分源码。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。