使用Promise封装小程序wx.request的实现方法

 更新时间:2019年11月13日 15:57:31   作者:张优秀  
这篇文章主要介绍了使用Promise封装小程序wx.request的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

因为业务需要,每个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 调试利器 Firebug使用详解六

    Javascript 调试利器 Firebug使用详解六

    有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输出完成后用console.groupEnd结束分组。
    2009-07-07
  • 自用js开发框架小成 学习js的朋友可以看看

    自用js开发框架小成 学习js的朋友可以看看

    前段时间项目需要用到js树,找了好多都不符合项目需求,后来发现了梅花雪树和js框架,类似C#名称空间的用法让我眼前一亮,遂拿来主义,读了几遍代码后就开工了(我是个急性子呵呵),完成了大部分,最近才找出来测试了下。
    2010-11-11
  • 在JS中如何把毫秒转换成规定的日期时间格式实例

    在JS中如何把毫秒转换成规定的日期时间格式实例

    本篇文章主要介绍了在JS中如何把毫秒转换成规定的日期时间格式实例,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • JavaScript中原始值和引用值深入讲解

    JavaScript中原始值和引用值深入讲解

    原始值代表原始数据类型的值,也叫基本数据类型,包括 Number、Stirng、Boolean、Null、Underfined,下面这篇文章主要给大家介绍了关于JavaScript中原始值和引用值深入讲解的相关资料,需要的朋友可以参考下
    2022-10-10
  • javascript中indexOf技术详解

    javascript中indexOf技术详解

    indexOf()函数用于查找子字符串在当前字符串中第一次出现的位置。该函数属于String对象,所有主流浏览器均支持该函数。下面我们就来详细探讨下javascript的index0f()函数
    2015-05-05
  • JS实现的贪吃蛇游戏完整实例

    JS实现的贪吃蛇游戏完整实例

    这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 小程序实现手写签名功能

    小程序实现手写签名功能

    这篇文章主要为大家详细介绍了小程序实现手写签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript 变量作用域及闭包

    JavaScript 变量作用域及闭包

    作用域JavaScript 的变量作用域是按照函数划分的,为了快速的了解它的特性,我们通过实例来进行演示。
    2009-08-08
  • JavaScript日期选择功能示例

    JavaScript日期选择功能示例

    这篇文章主要介绍了JavaScript日期选择功能,结合实例形式分析了javascript日期与时间相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • 左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    QQ在线客服在每一个web开发人员的记忆里都是一个经典,既然是经典,也就是必不可少,那就应该很好的呈现出来,本文整理了一些左右悬浮可分组的网站QQ在线客服代码,需要的朋友可以了解下
    2012-12-12

最新评论