微信小程序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的部分源码。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对毛票票的支持。