微信小程序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 相关文章推荐
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue.js循环radio的实例
Nov 07 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
PHP 高手之路(二)
2006/10/09 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
destoon数据库表说明汇总
2014/07/15 PHP
超级退弹代码
2008/07/07 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python中的闭包实例详解
2014/08/29 Python
深入理解Python装饰器
2016/07/27 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python简单操作excle的方法
2018/09/12 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python中threading开启关闭线程操作
2020/05/02 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
师范生自我鉴定范文
2013/10/05 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
三方协议书
2015/01/27 职场文书
收入证明申请书
2015/06/12 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android