使用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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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接口和抽象类使用示例详解
2014/03/02 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python实现Virginia无密钥解密
2019/03/20 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
LeetCode189轮转数组python示例
2022/08/05 Python