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

2022年9月9日10:17:21

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

如何使用async, await

来看下如何得到课程:

searchLessonsFromServer(){if(this.no_more_lessons){return}let self=thislet 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}`returnnewPromise((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之中, 然后在其它函数中这样调用:

//服务器搜索课程名称asyncsearch_me(){...awaitthis.searchLessonsFromServer()awaitthis.searchSentencesFromServer()if(!this.haveSearchResult()){let errMsg="搜索不到:"+this.latestSearchValue
        uni.showModal({
            title:'提示',
            content: errMsg,
            showCancel:false,});this.search_focus=truereturn}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

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

  • 作者:爱玩的安哥
  • 原文链接:https://blog.csdn.net/weixin_42293131/article/details/123332721
    更新时间:2022年9月9日10:17:21 ,共 1641 字。