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
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信小程序订阅消息记录坑