微信公众号开发

使用Promise封装小程序wx.request的实现方法

本文主要是介绍使用Promise封装小程序wx.request的实现方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

因为业务需要，每个http请求都要加上一个请求头，所以每次都要写很多重复的代码。

现在尝试把wx.request简单的封装了一下，调用一个request方法，每次请求自动携带header头信息，这样就省事多了，包含了常见的get post put delete 四种请求方法，支持Promise方式调用。

封装代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 class request {  constructor() {   this._baseUrl = 'https://xxx.com/api';   this._token = wx.getStorageSync('token');   this._header = {'Authorization': 'Bearer ' + token}  }    /**   * GET类型的网络请求   */  getRequest(url, data, header = this._header) {   return this.requestAll(url, data, header, 'GET')  }    /**   * DELETE类型的网络请求   */  deleteRequest(url, data, header = this._header) {   return this.requestAll(url, data, header, 'DELETE')  }    /**   * PUT类型的网络请求   */  putRequest(url, data, header = this._header) {   return this.requestAll(url, data, header, 'PUT')  }    /**   * POST类型的网络请求   */  postRequest(url, data, header = this._header) {   return this.requestAll(url, data, header, 'POST')  }    /**   * 网络请求   */  requestAll(url, data, header, method) {   return new Promise((resolve, reject) => {    wx.request({     url: this._baseUrl + url,     data: data,     header: header,     method: method,     success: (res => {      if (res.statusCode === 200) {       //200: 服务端业务处理正常结束       resolve(res)      } else {       //其它错误，提示用户错误信息       reject(res)      }     }),     fail: (res => {      reject(res)     })    })   })  } }   export default request

使用方法

在app.js中引入：

1 2 3 4 5 6 import request from './request.js' App({  myRequest(){   return new request();  } })

然后在要使用的页面里引入使用即可：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const app = getApp();//新建页面时 默认引入 const ajax = app.myRequest();//初始化一个的request() 实例   Page({  data:{},  onLoad(){   this.getData();  },  getData(){   ajax.getRequest('/getList',{id: 1024}).then((res)=>{    console.log(res);   }).catch((err)=>{    console.log(err);   })  } })

使用方法也是异常简单

  • 比如Get请求就是：ajax.getRequest(url: String, data: Object);
  • 比如Post请求就是：ajax.postRequest(url: String, data: Object);
  • ...

参考：

封装wx.request

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • 微信小程序wx.request的简单封装
  • 微信小程序wx.request拦截器使用详解
  • 小程序封装wx.request请求并创建接口管理文件的实现
  • 微信小程序wx.request实现后台数据交互功能分析
  • 微信小程序 wx.request方法的异步封装实例详解
  • 微信小程序网络请求wx.request详解及实例
这篇关于使用Promise封装小程序wx.request的实现方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航