当前位置: 首页 > Web前端 > HTML5

Promise与async,await学习总结

时间:2023-04-05 10:47:20 HTML5

Promise/async和await帮我们解决了什么?它为我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱//异步处理可能会产生这样的回调地狱(第二次异步操作与第一次异步结果相关)letAjax=function(data,success,error){$.ajax({data:data,success:function(res){success(res)},error:function(err){error(err)}})}Ajax(data,function(res){Ajax(data,function(res){//继续循环回调},function(err){})},function(err){})//看看promise是怎么处理的letpromise=function(data){returnnewPromise((resolve,reject)=>{$.ajax({data:data,success:function(res){resolve(res)},error:function(err){reject(err)}})})}letdata={}//ajax请求参数promise(data).then((res)=>{returnpromise(res)}).catch(err=>console.log(err)).then(res=>console.log(res))//async和await处理方法让异步操作更方便总结Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally()Promise.all()#当有多个不相关的异步操作,想一次性获取所有结果时,可以使用promise.all()Promise.all([p1,p2,p3])返回所有的值数组,只有当所有的异步操作状态都改变为resolve时,返回拒绝时,返回值为第一次拒绝的值Promise.race()#WhenWhen有多个不相关的异步操作,使用Promise.race([p1,p2,p3])获取最快返回的异步操作。该方法返回第一个有返回值(resolve或reject)的异步操作的返回值Promise.race([newPromise((resolve,reject)=>{console.log('initp1')setTimeout(()=>{console.log('initp1+')resolve('p1')},2000)}),newPromise((resolve,reject)=>{console.log('initp2')setTimeout(()=>{console.log('initp2+')resolve('p2')},1000)})]).then(res=>{console.log(res)})使用场景:设置一个请求超时的Promise。比赛([新承诺((解决,拒绝)=>{setTimeout(()=>{解决('1')},2000)}),新承诺((解决,拒绝)=>{setTimeout(()=>{reject(newError('timeout'))},1000)})]).then((res=>console.log(res)))Promise.resolve()Promise.resolve('111').然后(res=>console.log(res))Promise.reject()Promise.reject('err').catch(res=>console.log(res))Promise.try()[目前只是一个提议]#[使用时间]对于一个方法,如果你不知道它是一个同步和异步方法,但是你想用then做后续操作,你也希望同步方法同步执行,异步方法执行异步地。#等价方案(async()=>f())().then(res=>console.log(res)).catch(err=>console.log(err))async需要注意捕获哪些错误constf=()=>console.log('now')(async()=>f())()#async会吃掉f()的error,可以通过promise.catch()捕获(async()=>f())().then(res=>console.log(res)).catch(err=>console.log(err))参考Promiseasync/await