使用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 相关文章推荐
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
javaScript语法总结
2016/11/25 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python批量修改交换机密码的示例
2020/09/22 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
小学生母亲节演讲稿
2014/05/07 职场文书
手机被没收的检讨书
2014/10/04 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python