微信小程序踩坑系列——从wx.request谈异步处理

第一眼看到wx.request，就让我想起了$。ajax，使用起来确实不方便，让人难以忍受。幸运的是，小程序支持ES6语法，因此可以稍微修改一下。

先说说wx.request为什么承受不了。

铺垫：“看得见却抓不住“的异步请求

页面({data3360 {myData3360''}，//loadmydata函数用于打印myData的值，loadMyData () {console.log('获得的数据为：' this . data . mydata ')}，//lifetime函数onload用于监控页面加载onload :函数(){wx.request ({URL 3360' https://API '，//An api接口地址Success3360RES={console。

实际上，这是一个非常简单的异步问题。wx.request是异步请求，JS在继续之前不会等待wx.request的执行，所以JS会先按顺序执行this.loadMyData()。在服务器返回数据之后，loadMyData()将已经完成执行，当然它不会得到值。

其实我们在同步过程中只说“返回”。异步没有“返回”的概念(或者异步返回没有意义)。异步对应于“回调”，也就是说，对于异步函数，我们应该传入一个“回调函数”来接收结果。

初步解决：通过回调接收结果

最简单的解决方案是在回调中编写需要异步数据的函数：

.onload:函数(){ wx.request({ url: 'https://api '，//一个api接口地址success 3360 RES={ console . log(RES . data)This . setdata({ mydata 3360 RES . data })console . log(This . data . mydata)//写入回调函数中使用数据的函数success This . loadmydata()})}这样

但是如果逻辑复杂，需要多层异步操作，会怎么样呢？

asyncFn1(函数(){ //.asyncFn2(函数(){ //.asyncFn3(函数(){ //.asyncFn4(函数(){ //.asyncFn5(函数(){ //.});});});});});你觉得头皮发麻吗？什么优雅和可读性瞬间荡然无存，这就是恐怖的“回调地狱”。

但是我们发现微信小程序的网络请求wx.request也是这种依赖回调函数的形式，类似于之前的$。ajax，在逻辑复杂、页面执行顺序要求多的情况下，其缺点也很明显。好在小程序支持ES6，所以我们可以尽可能拥抱Promise！

使用Promise包装wx.request

Promise简单来说就是可以将异步执行逻辑和结果处理分开，摒弃逐层回调嵌套，使得处理逻辑更加清晰。如果你想了解更多，请自行查找信息。

现在让我们用Promise来包装wx.request:

2345678910111213141516/* * * * Request promise用于将wx.request重写为Promise模式* @ param: {string} myurl接口地址* @return: Promise实例对象*/Const Request Promise=my URL={//返回一个Promise实例对象返回新的Promise((解析，拒绝)={wx.request ({url3360 myurl，Success : RES=resolv(RES)})}//我把这个函数放在utils中。

现在再试一次：

//引用模块Constutil API=require('././utils/util . js’)页面({ 0.//lifetime函数onload用于监控页面加载onLoad:函数(){ utilapi . request promise(' https://www . bilibili . com/index/ding . JSON ')//Use。然后处理结果。然后(res={console.log(res.data)这个的结果。setdata({ mydata : RES . data })console . log(这。data.mydata)这个。loadmydata ()}})与回调函数一致。当有多个异步请求时。然后(fn)直接连续，逻辑清晰。

当然这里只写了最简单的Promise函数，不完整。做出wx.request更完整的Promise，未来业务还需要改进。此外，各种小程序开发框架也有现成的promise API，随时可以使用。