使用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 iScroll.js移动端滚动条插件
Mar 24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
前端jquery部分很精彩
May 03 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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抓取https的内容的代码
2010/04/06 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
日期 时间js控件
2009/05/07 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
深入浅析javascript继承体系
2017/10/23 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
重命名批处理python脚本
2013/04/05 Python
python实现kNN算法
2017/12/20 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python实现简单http服务器功能
2018/09/17 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
解析python实现Lasso回归
2019/09/11 Python
python中property和setter装饰器用法
2019/12/19 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
模具专业推荐信
2013/10/30 职场文书
好军嫂事迹材料
2014/01/15 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
军事理论课感想
2015/08/11 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
浅谈Python类的单继承相关知识
2021/05/12 Python
Python利用folium实现地图可视化
2021/05/23 Python