使用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
Oct 31 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
Node.js+Express配置入门教程
May 19 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
Javascript删除数组里的某个元素
Feb 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时间不正确的解决方法
2008/04/09 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php实例化一个类的具体方法
2019/09/19 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
php与js的区别是什么
2013/08/05 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
Python的装饰器使用详解
2017/06/26 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
小学教师岗位职责
2013/11/25 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
销售助理岗位职责
2015/02/11 职场文书
2016继续教育研修日志
2015/11/13 职场文书
演讲开头怎么书写?
2019/08/06 职场文书