异步到同步微信小程序开发

问题概述

基于小程序请求的异步特性，app中的请求。js onLaunch（）和索引中的请求。js onLoad（）同时生成。因此，如果有基于onLoad（）中onLaunch（）返回的数据的请求，将报告错误。这将使onLoad（）“第一次”请求的数据无法正常获取。

我的小程序中的所有requset请求都需要使用用户的唯一令牌在头中发起，令牌是从wx获得的。login（）在app中返回。jsonLaunch（）（从代码交换到后台），然后通过wx存储在applet中。setStorageSync（'token'，res.data）。为了解决这个问题，我们需要解决两个js文件之间的异步请求问题。

使用Promise（）

一个小小的承诺

var promise=new promise（函数（resolve，reject）{

如果（/*异步操作成功*/）{

解析（值）；

}其他{

拒绝（错误）；

}

});

许诺那么（函数（值）{

//成功

}，函数（值）{

//故障

});

Promise构造函数接受函数作为参数。函数的两个参数是解析方法和拒绝方法。

如果异步操作成功，请使用resolve方法将Promise对象的状态从Incomplete更改为successful（即，从pending更改为resolve）；

如果异步操作失败，请使用reject方法将Promise对象的状态从Incomplete更改为Failed（即，从pending更改为rejected）。

接下来，将promise库引入小程序。从官方网站下载压缩的promise库。直接打开bluebird.core.min.js并复制代码。

Bluebird是一个功能齐全的JavaScript promises库，具有无与伦比的性能。

创造一个新的承诺。js文件，并复制bluebird.core.min.js中的代码。

app中引入。js到需要：

const Promise=require（'units/Promise.js'）；

这样，promise就可以用在小程序中。库大小约为64kb，这是可以接受的。

接下来，直接粘贴代码：

app({

onLaunch:函数（）{

...

},

//登录以获取令牌

getToken:函数（）{

让_ this=this；

return new Promise（函数（resolve，reject）{

wx.check会话({

成功：函数（res）{resolve（res；}，

失败：函数（res）{

wx.登录({

成功：res=>{

//将res.code发送到后台以交换openId、sessionKey、unionId

如果（res.code）{

wx.请求({

url:CONFIG.loginUrl，

数据：{

代码：res.code

},

标题：{

'shopId'：配置shopId

},

方法：“POST”，

成功：res=>{

wx。setStorageSync（'token'，res.data）；//保存返回的令牌

解决（res）；

}

})

}其他{

安慰log（'获取用户登录状态失败！'+res.errMsg）；

拒绝（“错误”）；

}

}

})

}

})

})

}

})

接下来，在index.js中处理

常量应用=获取应用（）；

第页({

onLoad:函数（）{

let token=wx.getStorageSync（'token'）；

if（标记==“”）{

//首次登录并获得登录状态

app.getToken（）。那么（函数（res）{

_这个。获取数据（）；//此时，必须已获取令牌，此时将执行getData（）

})

}其他{

//当有令牌时直接获取数据

_this.getData（）；

}

},

//获取数据

获取数据：函数（）{

wx.请求({

标题：{

“令牌”：wx.getStorageSync（“令牌”）

},

url:'https://xxxxx.xxxxx ',

方法：'GET'，

成功：res=>{

控制台日志（res）；

}

})

}

})

此时，清除开发工具的缓存，再次编译页面，打开调试面板的网络，可以看到wx。索引中的请求。js在wx成功后启动。login（），它实现了我们的目标并解决了问题。