小程序之纯粹callback回调、promise和async、await区别以及用法
纯粹callBack和promise区别
1、纯粹的callBack回调因为剥夺了函数的回调能力,所以当函数的调用层数很多的时候,需要层层传递callBack
2、promise不需要层层传递callBack,因为它使函数具备了return的能力
3、对于多个异步需要合并的情况下,用纯粹的callback 是相当麻烦的,但是promise很好的解决这个问题
4、promise是一个对象,不同于函数,对象能保留状态,而函数在被调用需要马上返回状态(闭包函数除外)
promise基础用法
1、new 一个promise对象
2、异步代码写在promise的函数中
3、promise接受两个参数,一个resolve(已成功),一个reject(已失败)
4、promise有三种状态pendding(进行中,当new了promise就是pendding的状态)、fulfilled(已成功)、rejected(已失败),当成功的时候调用resolve将状态改为已成功,当失败的时候调用reject将状态改为已失败,一旦状态发生改变之后,状态就凝固了,后面就无法改变状态了,成功会将成功的数据返回,失败会将失败的信息返回。
5、在需要获取数据的地方通过promise.then()的方式获取,这里面接受两个参数,都是匿名函数,第一个是接受成功的函数,第二个是失败时候的函数
const promise = new Promise((resolve, reject)=>{ wx.getSystemInfo({ success: (res)=>{ resolve(res) }, fail: (error)=>{ reject(error) } }) }); promise.then((res)=>{ //获取成功的结果,res中存着获取成功时的数据 console.log(res) },(error)=>{ // 获取数据失败时 console.log(error) })
6、es6的写法,如果函数只有一个参数的话,括号不需要,如果括号中只有一行代码,花括号可以不需要
promise.then((res)=>{ //获取成功的结果,res中存着获取成功时的数据 console.log(res) },(error)=>{ // 获取数据失败时 console.log(error) }) const promise1 = new Promise((resolve, reject)=>{ wx.getSystemInfo({ success: res=> resolve(res), fail: error=> reject(error) }) }); promise1.then( res=> console.log(res), error=> console.log(error) )
promise多异步任务合并用法(promise.all promise.race)
promise.all 是多有的请求全部返回才能回调
promise.race 是多个请求中只要有一个请求完成回调即返回,返回的是最先回调的结果
onLoad: function (options) { wx.showLoading(); const bid = options.bid const detail = bookModel.getDetail(bid); const comments = bookModel.getComments(bid); const likeStatus = bookModel.getLikeStatus(bid) // Promise.all 要等所有请求全部返回才能回调 还有一个 .race 只要有一个子请求完成就回调,回调的是竞争成功的回调结果也就是完成的 Promise.all([detail, comments, likeStatus]) .then(res=>{ this.setData({ book: res[0], comments: res[1].comments, likeStatus: res[2].like_status, likeCount: res[2].fav_nums }) wx.hideLoading() }) }
async、await基础用法
1、async和await使得异步请求操作变得 “同步化”,其使得异步和同步一样直接返回一个结果,返回的成功失败,数据的获取直接从保存结果的变量中去判断以及取结果
2、async和await一般成对出现,任何一个离开了,另外一个都活不下去
3、async和await的使用,是基于promise,并且async返回的也是一个promise对象
timeout(ms){ return new Promise(resolve=>{ setTimeout(resolve, ms) }) } async asyncPrint(){ await this.timeout(123) console.log(11) }
转载于:https://www.cnblogs.com/dgxblogs/p/11492030.html
< 4000 ul class="toolbox-list">-
文章举报
- js异步回调Async/Await与Promise区别
- Thread、ThreadPool、Task、Parallel、Async和Await基本用法、区别以及弊端
- 前端面试——回调、Promise、Generator和async-await
- 基于Promise的async和await的区别
- Promise和Async/Await用法整理
- Callback Promise Generator Async-Await 和异常处理的演进
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
- 何时使用WINAPI,CALLBACK 以及_stdcall _cdecl _pascal 等的用法区别总结
- Callback Promise Generator Async-Await 和异常处理的演进
- C# AsyncCallback异步回调用法示例
- Node.js异步控制流:回调、事件、Promise和async/await
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
- callback, promise, co/yield, async/await 大混战
- Promise ,async/await 基本用法
- 异步编程 -- 使用Promise、Generator、async/await 规避回调地狱
- async 和await的结合promise用法
- Callback Promise Generator Async-Await 和异常处理的演进_0
- Callback Promise Generator Async-Await 和异常处理的演进_1
- promise,async await ,generator的区别和nextTick , setImmedate的关系
- Callback Promise Generator Async-Await 和异常处理的演进_2