微信小程序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 相关文章推荐
js 回车提交表单两种实现方法
Dec 31 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue下的@change事件的实现
Oct 25 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
原生JavaScript实现进度条
Feb 19 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php备份数据库类分享
2015/04/14 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
Python编程实现的简单Web服务器示例
2017/06/22 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python在协程中增加任务实例操作
2021/02/28 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
双拥工作宣传标语
2014/06/26 职场文书
银行授权委托书格式
2014/10/10 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang