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


Posted in Javascript onNovember 13, 2019

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

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

封装代码

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中引入:

import request from './request.js'
App({
 myRequest(){
  return new request();
 }
})

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
详解Layer弹出层样式
Aug 21 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
微信小程序wx.request的简单封装
Nov 13 #Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
highcharts.js数据绑定方式代码实例
Nov 13 #Javascript
vue prop属性传值与传引用示例
Nov 13 #Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 #Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
Jquery异步上传文件代码实例
Nov 13 #jQuery
You might like
php 验证码实例代码
2010/06/01 PHP
php设置编码格式的方法
2013/03/05 PHP
php字符串截取的简单方法
2013/07/04 PHP
php中引用符号(&)的使用详解
2013/11/13 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python代码如何注释
2020/06/01 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
项目专员岗位职责
2013/12/04 职场文书
实习评语
2013/12/16 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android