使用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 request = (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:', "结束");
})