使用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开发者都需要知道的5个小技巧
Jan 08 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
React Fragment介绍与使用详解
Nov 11 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写出自己的BLOG系统 2
2010/04/12 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
职工运动会感言
2014/02/07 职场文书
读书之星事迹材料
2014/05/12 职场文书
员工离职通知函
2015/04/25 职场文书
计划生育责任书
2015/05/09 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技