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

最新推荐文章于 2024-08-22 15:00:07 发布

爱玩的安哥

最新推荐文章于 2024-08-22 15:00:07 发布

阅读量1.9k

点赞数 1

分类专栏： uniapp 文章标签：微信小程序小程序 vue.js

本文链接：https://blog.csdn.net/weixin_42293131/article/details/123332721

版权

uniapp 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用async/await来顺序执行搜索课程和句子的异步方法。通过将搜索功能包装在Promise中，再利用async关键字定义函数，配合await确保搜索课程和句子的操作按顺序进行。在搜索无结果时，显示相应提示。这种方式简化了异步编程，使得后续处理可以等待所有搜索操作完成。

摘要由CSDN通过智能技术生成

今天要实现一个功能，在搜索完课程及句子之后判断是否有结果，因为需要对课程和句子的结果统一判断，所以要使用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
    }
}