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

 更新时间:2019-09-09 13:00:50   作者:佚名   我要评论(0)

前言


作为一个前端开发者,从最开始的js、jQuery一把梭,后来的vue、react、angular等MVVM、MVC框架,我们在开发工程中都离不开HTTP库的使用。


HTTP库

前言

作为一个前端开发者,从最开始的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的部分源码。

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

您可能感兴趣的文章:

  • 微信小程序设置http请求的步骤详解
  • 微信小程序 http请求封装详解及实例代码
  • 微信小程序 封装http请求实例详解
  • 微信小程序 http请求的session管理
  • 微信小程序 http请求详细介绍
  • 微信小程序HTTP接口请求封装的实现
  • 微信小程序封装的HTTP请求示例【附升级版】
  • 监控微信小程序中的慢HTTP请求过程详解
  • Fundebug支持监控微信小程序HTTP请求错误的方法
  • 微信小程序HTTP接口请求封装代码实例

相关文章

  • Spring 面向切面编程AOP实现详解

    Spring 面向切面编程AOP实现详解

    简介 1、什么叫做面向切面编程? 概念:把一个个的横切关注点(某种业务的实现代码)放到某个模块中去,称之为切面。每个切面影响业务的一种功能,切面的
    2019-09-09
  • 微信小程序HTTP请求从0到1封装

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

    前言 作为一个前端开发者,从最开始的js、jQuery一把梭,后来的vue、react、angular等MVVM、MVC框架,我们在开发工程中都离不开HTTP库的使用。 HTTP库
    2019-09-09
  • Yii框架日志操作图文与实例详解

    Yii框架日志操作图文与实例详解

    本文实例讲述了Yii框架日志操作。分享给大家供大家参考,具体如下: 将日志记录到文本中. Yii::log("test"); //写入测试日志 //找到配置文件
    2019-09-09
  • 在pycharm中配置Anaconda以及pip源配置详解

    在pycharm中配置Anaconda以及pip源配置详解

    在学习推荐系统、机器学习、数据挖掘时,python是非常强大的工具,也有很多很强大的模块,但是模块的安装却是一件令人头疼的事情。 现在有个工具——anaconda
    2019-09-09
  • SpringMVC KindEditor在线编辑器之文件上传代码实例

    SpringMVC KindEditor在线编辑器之文件上传代码实例

    最近几个项目都要用到在线编辑器,由于之前做在线编辑器都只在php上,对于用java尤其是springmvc框架时,似乎并不如PHP那么简单,搜集了很多博文和资料,全部
    2019-09-09
  • Python pandas.DataFrame 找出有空值的行

    Python pandas.DataFrame 找出有空值的行

    0.摘要 pandas中DataFrame类型中,找出所有有空值的行,可以使用.isnull()方法和.any()方法。 1.找出含有空值的行 方法:DataFrame[DataFrame.isnull().T.any
    2019-09-09
  • php求斐波那契数的两种实现方式【递归与递推】

    php求斐波那契数的两种实现方式【递归与递推】

    本文实例讲述了php求斐波那契数的两种实现方式。分享给大家供大家参考,具体如下: 斐波那契数,亦称之为斐波那契数列(意大利语: Successione di Fibonacci
    2019-09-09
  • python制作英语翻译小工具代码实例

    python制作英语翻译小工具代码实例

    这篇文章主要介绍了python制作英语翻译小工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Python制作词云图代码实例

    Python制作词云图代码实例

    词云图是将词汇按照频率的高低显示不同大小而形成的图,可以一目了然地看出关键词。下面是词云图的python代码~ #导入需要模块 import jieba import numpy
    2019-09-09
  • Java transient关键字与序列化操作实例详解

    Java transient关键字与序列化操作实例详解

    本文实例讲述了Java transient关键字与序列化操作。分享给大家供大家参考,具体如下: 一 介绍 transient关键字不会进行JVM虚拟机的序列化,但也可以自己进行
    2019-09-09

最新评论