使用promise解决微信小程序中的request回调地狱

本篇文章主要使用微信小程序中的request方法为例子

wx.request原始用法

 wx.request({
     url: 'url', // 这里填写的接口地址
     data: { }, //这里填写需要传输的数据
     method: 'POST',  // 这里也可以是'GET'
      header: {
        'content-type': 'application/json', // 默认值
        'session': ‘sessionid’  //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
      },
  success:function(res) {
    console.log(res.data)
  }
})

原生request的缺点

首先wx.request是异步请求, JS不会等待 wx.request 执行完毕再往下执行，所以JS可能会按顺序会先执行别的方法。
如果我们想要先获取一个数据，然后通过这个返回的数据再向服务器获取另外的数据
我们一般的解决方法就是：在回调函数来再次发送请求，情况如下：

   wx.request({
     url: 'url', // 这里填写的接口地址
     data: { }, //这里填写需要传输的数据
     method: 'POST',  // 这里也可以是'GET'
     header: {
        'content-type': 'application/json', // 默认值
        'session': ‘sessionid’  //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
      },
     success:function(res) {
         console.log(res.data)
         //这里再次发送请求
         wx.request({
            url: 'url', // 这里填写的接口地址
            data: { }, //这里填写需要传输的数据
            method: 'POST',  // 这里也可以是'GET'
            header: {
                'content-type': 'application/json', // 默认值
                'session': ‘sessionid’  //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
              },
            success:function(res) {
             console.log(res.data)
          }
        })
  }
})   

两个异步函数嵌套起来，似乎感觉还不是很乱，但如果4个5个呢？这就是所谓的回调地狱，这样的代码让人看了就头疼，而且难以维护。

promise解决回调地狱

promise是什么？
promise翻译过来是承诺，它承诺会有一些数据会给我们；promise是一个对象，它代表了一个异步操作，从它可以获取异步操作的消息。
promise有三种状态：pending(等待)，fulfiled(成功)，rejected(失败)，只有异步操作的结果可以决定它是什么状态；状态一旦改变，就不会再变，任何时候都可以得到这个结果。
下面是通过promise封装的wx.request的案例

 //封装request方法
const reques = (url, method, data) => {
var promise = new Promise((resolve, reject) => {
    //提示一下
    wx.showLoading({
      title: '加载中'
    })
    //网络请求
    wx.request({
        url: url,
        data: data,
        method: method,
        header: {
            'Content-Type': 'application/x-www-form-urlencoded',//这是python后台使用的
            'Cookie': 'sessionid=' + getApp().globalData.cookie //这是我保存在全局变量中的的sessionid
        },
        success: function (res) {
            wx.hideLoading()
            //服务器返回数据
            if (res.statusCode == 200) {
                resolve(res);
            } else {
                //返回错误提示信息
                reject(res.data);
            }
        },
        fail: function (e) {
            wx.hideLoading()
            wx.showToast({
              title: '无法连接服务器',
              icon: 'loading',
              duration: 1000
            })
            reject('网络出错');
        }
})
});
    return promise;
}

module.exports = {
    request:request
}

调用方法

Const tools = require('../../utils/util')

使用方法

tools.request (url,methods ,data).then(res => {
  //服务器返回数据
  console.log('success:',res );
}).catch(res => {
    //报错
    console.log('fail:',res);
}).finally(()=>{
    //完成
   console.log('finally:', "结束");
})