微信小程序wx.request()异步处理及promise的使用和封装

微信小程序和服务器端的数据交互都是通过wx.request()这个API函数来完成的，这是一个异步函数，其原型如下：

 wx.request({
      url: \'https://www.tm.com/api/orders\',  
      data: {
        pageIndex: 1,   
 5         pageSize: 10
      },
      header: {
        \'content-type\': \'application/json\' // 默认值
      },
      success:function(res) {
        console.log(res.data)
      },
      fail:function(res) {
        console.log(res.data)
      },
      complete:function(res) {
        console.log(res.data)
      },
 })

接受服务器端传回来的数据是通过回调函数success:function(res){ }来进行的，实际项目中一般是这样的形式：

     success:function(res) {
        if(res.statusCode==200){ //一定要先判断status==200再接收值，这是小程序的规则决定的。
          let ret = res.data;
          //其他操作 
        } 
      },

因为是异步函数，获取服务器数据时会出现几秒至几十秒的延迟，

在渲染页面的时候如果要用到服务器数据的可能获取不到，

一个常用的解决方式是所有涉及到服务器数据的变量都要进行初始化，并且页面加载的时候用loading提示，如下：

  data:{
　　　title: \'购物车\', amount: 0, // 初始化需要从服务端获取值的变量
 3 },

  test:function(){
 　　　let _this = this;
      wx.showLoading({
        title: \'数据加载中...\',
      }) //页面加载时用户友好提示
      wx.request({
       url: \'https://www.tm.com/api/orders\',  
       data: {         
12         pageIndex: 1, pageSize: 10
      },
      header: {
        \'content-type\': \'application/json\' // 默认值
      },
      success:function(res) {
        if(res.statusCode=200){
          let orders = res.data;
          //从服务器端取到值后用setData()函数更新变量值
　　　　　　　_this.setData({title:orders.title}); 
　　　　　　　_this.setData({amount:orders.amount});
　　　　　　　// 其他操作
        } 
      },
      fail:function(res) {
        console.log("request error...")
      },
      complete:function(res) {
        wx.hideLoading(); //数据加载完成后关闭loading.
      },
    })

  },

在有些情况下，我们需要根据服务器传递回来的值来做下一个操作的时候其代码都要写到success:function(res){ }函数中，

如果success:function(res){ } 中又要调用wx.request()就会碰到所谓的“回调地狱”，难以编码和维护，

在小程序中可以用promise的方式来处理，部分异步API已经支持，在官方文档上的描述是这样的：

从基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式，官方文档截图如下：

但是很遗憾wx.request()还不支持promise这种方式，也就是说不能用wx.request().then()的方式来处理数据，

所以我们需要用promise对wx.request()来做封装。

 

使用promise分两步：

一 . 先构造 promise 对象，语法如下，Promise的构造函数用匿名函数 function(resolve, reject){ } 做参数，

匿名函数的 resolve 和 reject 参数是执行成功和失败时要调用的函数：

let pro = new Promise(function(resolve, reject) {
    //do something.
});

 

二 . 然后在then方法中传入要回调的函数做下一步的处理，如下：

pro.then(resolve, reject);

其中第一个参数是resolve回调函数，表示任务完成要执行的方法，第二参数是reject回调函数，表示任务失败要执行的方法。

其具体的使用方式还有如下几种形式：

1 ， 只有resolve没有reject，可以这样写（reject参数可以省略）：

pro.then(function (data){ //用匿名函数做参数
　　//do something
});

2 . 没有resolve只有reject，必须这样写(resolve要用null占位，不能省略)：

pro.then(null,function(err){ //用匿名函数做参数
　　//do something
});

三 . then函数返回的是一个新的promise对象，所以可以链式调用，如下：

pro.then(function (data){ })
   .then(function (data){ })
   .then(function (data){ });

四 . ES6标准中提供了catch函数来处理任务失败时要执行的操作，相当于then(null, reject)，如下：

pro.catch(function(err) {
    //do something
});

这种写法可读性更好，更清晰。

 

有了上面的基础知识，就可以封装一个promise版本的wx.request()了，

考虑到这样一个功能在小程序的很多地方都会用到，我们将其放到一个单独的js文件中，

调用的时候引用这个js文件就可以了，在小程序的utils目录中新建一个common.js的文件，如下：

 

common.js文件中的代码如下：

const requestSync = (_url, _data, _method, _callcomplete)=>{
  let pro = new Promise(function(resolve, reject) {
    wx.request({
      url: _url,
      data:_data,
      method:_method,
      success:function(res){
        if(res.statusCode==200){
          console.log("wx.request() is success : 200 ok.");
          resolve(res); //任务成功就执行resolve(),其他情况下都执行reject()
        }
        else{
          console.log("wx.request() is success : 200 lost.");
          reject(res); //响应失败就执行reject()
        }
      },
      fail:function(res){
        console.log("wx.request() is fail : "+ res.errMsg);
        reject(res); //API执行失败也执行reject()
      },
      complete:function(res){
        console.log("wx.request() is complete .");
        if(_callcomplete) {_callcomplete(res);} //如果有回调函数在执行完成后要调用回调函数
      }
    })

  }); 
  return pro;
} 

//暴露接口供外部调用
module.exports = {
  requestSync: requestSync
}

 小程序的.js页面调用代码如下：

const wx2 = require(\'../../utils/common.js\') //添加引用
const app = getApp(); //获取应用实例

Page({
  data: { 
  },
    
  helloTap:function(e){ 
    let url = "https://www.tm.com/api/orders";
    let data = {pageIndex:1};
    let pro = wx2.requestSync(url, data, "GET", null); //调用封装后的方法
    pro.then(function(res){ //任务成功执行的操作，对应Promise中的 resolve(res)函数
      console.log("success:"+res.statusCode);
      let data = res.data;
      //do something...
    }).catch(function(res){ //任务失败执行的操作，对应Promise中的 reject(res)函数
      console.log("error:"+res.errMsg);
      wx.showToast({
        title: \'系统出错。\'
      })
    });
  },

  onLoad: function () {
  
  },
   
})

注 ： 这里虽然用promise对wx.request()进行了封装，但是本质还是异步处理，

要获取服务器端传回来的数据仍然需要将后续的代码放到 pro.then(function(res){ }) 中进行编码，

但这种方式会使代码可读性更好，更易维护，

特别是页面需要有服务器端回传值才能继续执行的情况下编程更友好。

具体怎么用，还是要根据项目的实际情况做决定。