小程序async-await同异步问题
title: 小程序async-await同异步问题
categories: 踩坑记录📝
tags:
- 小程序
- js异步
date: 2022-03-15 23:41:44
不熟悉node开发和小程序，某次小项目遇到一些异步问题，在此记录📝。
1. 调用异步函数崩溃😡
exports.userLogin = async (uname, password) => {
//pass
}
描述：在utils.js中写了userLogin函数，在login/login.js登陆页的login函数中调用，直接崩溃。如下：
login: function () {
//……
let cookies = userLogin(phone_number, password);
//……
}
后了解到async必须和await一起使用，遂更改代码为：
let cookies = await userLogin(phone_number, password);
仍然崩溃，因为login不是异步函数，这时解决方法有两种，第一种是更改login的函数类型，加上async修饰；另一种是用异步函数把异步语句包裹从而和login分离。
//方法一
login: aysync function () {
let cookies = userLogin(phone_number, password);
}
//方法二
login: function () {
!async function () {
let cookies = userLogin(phone_number, password);
} ()
}
2. wx.request() success 回调同步🤕
wx.request为异步函数，请求成功后触发success`回调，无法把请求数据传出。
最开始使用了一种非常笨拙且不优雅的方式传出数据：页面的data数据字典，通过在回调函数中that.setData()存储数据，然后在外部使用this.data.…取出数据。
后面实在无法忍受这种不方便的写法，找到了Promise的解决方案。使用resolve()把数据传出，但需要在前面加上await来等待异步request执行完毕，不然只会得到Promise对象。
let resp = await new Promise((resolve) => {
wx.request({
url: URL,
method: METHOD,
header: {},
success: res => {
resolve(res.data)
}
})
})
3. wx.request success 回调中添加异步过程🥴
原始代码如下：
async function testFun () {
wx.request({
success: res => {
let a = await ……
}
})
}
本以为wx.request的外层函数被async修饰，可以添加await同步，但上面代码报错again。
解决方法是用async修饰success的回调函数：
async function testFun () {
wx.request({
success: async function (res) {
let a = await ……
}
})
}