Uniapp-远离回调callback请使用await、async

今天要实现一个功能，在搜索完课程及句子之后判断是否有结果，因为需要对课程和句子的结果统一判断，所以要使用async, await来将两种搜索的异步方法可以顺序调用。

如何使用async, await

来看下如何得到课程：

searchLessonsFromServer() {
    if (this.no_more_lessons) {
        return
    }
    let self = this
    let page = self.searchMeResult.pth_lessons.page //
    let per_page = 10 //每页5个记录
    let toServerUrl =    `${this.$backHost}/api/v1/users/${this.$user.id}/lessons/search_me/${self.latestSearchValue}/${per_page}/${page}`
    return new Promise((resolve, reject) => {
        this.$request({
            url: toServerUrl,
            success: ((res) => {
                console.log('lessons#searchLessonsFromServer in Promise():', res);
                if (res.pth_lessons.length != 0) {
                    self.searchMeResult.pth_lessons.data = [...self.searchMeResult
                        .pth_lessons.data,
                        ...res.pth_lessons
                    ]
                } else {
                    self.no_more_lessons = true
                }
                resolve(res)
            })
        });
    })
},

异步方法最后返回一个Promise，这样就可以在其它函数中将其用同步的办法来调用searchLessonsFromServer函数。

这里实现的课程搜索是有翻页功能的，得到服务器返回的数据res之后，用三点扩展符将其添加到前端的数据中，

self.searchMeResult.pth_lessons.data = [
						...self.searchMeResult.pth_lessons.data,
                        ...res.pth_lessons
                    ]

搜索句子也是类似的将异步方法放到new Promise之中， 然后在其它函数中这样调用：

//服务器搜索课程名称
async search_me() {
	...
 	await this.searchLessonsFromServer()
    await this.searchSentencesFromServer()
    if (!this.haveSearchResult()) {
        let errMsg = "搜索不到:" + this.latestSearchValue
        uni.showModal({
            title: '提示',
            content: errMsg,
            showCancel: false,
        });
        this.search_focus = true
        return
    } else {
        this.searchValue = this.latestSearchValue
    }
}
                

即在调用函数search_me前面加上async, 使用异步方法时，前面加上await即可！这样，后续的haveSearchResult就肯定是在前面两个异步的搜索函数完成之后才会执行！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QzDYdHGz-1646640234157)(https://dw.gsenglish.cn:5543/uploads/2022/03/clipboard-202203011734-0lebb.png)]

async和await:让异步编程更简单

更多async,await 相关知识可以参考：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await

我是@爱玩的安哥，关注我获取更多有用知识