微信小程序HTTP请求从0到1封装


Posted in Javascript onSeptember 09, 2019

前言

作为一个前端开发者,从最开始的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相似,支持许多配置项的设置,但是缺少公共配置、响应和请求拦截等实用功能

第一步--创建请求实例

class Axios {
 constructor() {
  this.instance = null // 类的实例
  this.config = defaultConfig
 }

 create(instanceConfig) {
  const { config } = this
  // 创建实例的时候添加基本配置
  this.config = {
   ...config,
   ...instanceConfig
  }
  return this
 }

 // 单例
 static getInstance() {
  if (!this.instance) {
    this.instance = new Axios()
  }
  return this.instance
 }
}

创建实例

const axios = Axios.getInstance()

promise包装小程序请求

const dispatchRequest = function(config) {
 return new Promise((resolve, reject) => {
  wx.request({
   ...config,
   url: config.base + config.url,
   success: res => {
    resolve(res)
   },
   fail: res => {
    reject(res)
   }
  })
 })
}

给请求实例添加request方法

request(options) {
 const { config } = this
 // 实例请求的时候添加基本配置
 const requsetOptions = {
  ...config,
  ...options
 }
 return dispatchRequest(requsetOptions)
}

第二步--创建请求工具方法

创建实例,通过create设置基本配置项

const instance = (config = {}) => {
 return axios.create({
  base: globalApi,
  ...config
 })
}

创建请求工具方法,执行实例request

export function request(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()
   }
  })
 }
}

这样,一个请求的工具方法就完成了,但是这个方法现在只支持基本的请求和基本配置项的配置,还是缺少我们很常用的公共请求和响应的拦截。

第三部--添加请求和响应的拦截器

创建拦截器实例

class InterceptorManager {
 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: new InterceptorManager(),
  response: new InterceptorManager()
 }
}

在实例的request添加promise执行队列

request(options) {
  const { config, interceptors } = this
  // 实例请求的时候添加基本配置
  const requsetOptions = {
   ...config,
   ...options
  }

  const promiseArr = [] // 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
  })

  let p = Promise.resolve(requsetOptions)
  promiseArr.forEach(ele => {
   p = p.then(ele['fulfilled'], ele['rejected'])
  })

  return p
 }

在请求工具方法中通过设置请求和响应的拦截方法

axios.interceptors.request.use(
 request => {
  return request
 },
 err => {
  console.error(err)
 }
)
axios.interceptors.response.use(
 response => {
  return response
 },
 err => {
  console.error(err)
 }
)

在请求拦截方法里面可以添加数据转换,在请求头部添加sign、token等,在响应拦截方法里面去做公共的数据处理等

最后

从零搭建一个简单的请求库很简单,但是想考虑的方方面面,设计好整个流程会比较麻烦,需要不断的改进和重构,本文的搭架过程参考了Axios的部分源码。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
javascript删除数组元素的七个方法示例
Sep 09 #Javascript
微信小程序 select 下拉框组件功能
Sep 09 #Javascript
移动端手指操控左右滑动的菜单
Sep 08 #Javascript
swiper Scrollbar滚动条组件详解
Sep 08 #Javascript
You might like
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
新闻内页-JS分页
2006/06/07 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python将回车作为输入内容的实例
2018/06/23 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python列表解析操作实例总结
2020/02/26 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
保洁主管岗位职责
2013/11/20 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
法学专业自我鉴定
2014/02/05 职场文书
设计师求职信模板
2014/05/06 职场文书
英语求职信范文
2014/05/23 职场文书
初中运动会前导词
2015/07/20 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript