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

这篇文章主要讲解了"微信小程序HTTP请求从0到1封装的方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序HTTP请求从0到1封装的方法"吧！

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等，在响应拦截方法里面去做公共的数据处理等

感谢各位的阅读，以上就是"微信小程序HTTP请求从0到1封装的方法"的内容了，经过本文的学习后，相信大家对微信小程序HTTP请求从0到1封装的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！