终极异步解决方案Async-await

定义

Async function声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise返回其结果。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}
 
async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}
 
asyncCall();

描述:

当调用一个Async函数的时候,会返回一个Promise对象。当Async返回一个值的时候,Promiseresolve方法会负责传递这个值(对应了前一句的返回一个Promise对象),当Async函数抛出异常时,Promisereject方法也会传递这个异常值。

await

async函数中可能会有 await表达式,这会使 async函数暂停执行,等待表达式中的 Promise执行完成后才会继续执行 async函数并返回解决结果。

*await关键字只能在async函数中使用

var resolveAfter1Second = function() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fakin执行完成");
    }, 1000);
  });
};  
var sequentialStart = async function() {
    const fast = await resolveAfter1Second();
    console.log(fast)
}
 
sequentialStart()

解释:先定义了一个普通的resolveAfter1Second函数,返回的是一个promise,在这个promise内部,是做一秒钟后输出(‘fakin执行完成’)然后在sequentialStart这个async函数中,使用await关键字暂停这个普通resolveAfter1Second函数。在这个async函数代码执行到const fast = await resolveAfter1Second();这一行的时候,整个函数就会等待,等待resolveAfter1Second()执行完毕,并返回结果,然后在 console.log(fast)

await注意事项

不要将awaitPromise.then混淆
如果你希望同时await两个或者是更多的Promise对象,你必须使用Promise.then

Async进阶(重写Promised调用链)

先定义两个函数

let _fakin = function(){
    return new Promise((resolve,reject)=>{
        setTimeOut(()=>{
            console.log('fakin')
        },1000)
        resolve(10)
    })
     
}
let _errFakin =function (){
    return new Promise((resolve,reject)=>{
        setTimeOut(()=>{
            console.log('失败')
        },1000)
        resolve(10)
    })
}

上面定义了两个函数,分别为成功和失败返回一个Promise
标准版本Promise

    function fakin(){
        return new Promise((resolve,reject)=>{
              // do something  
        }).catch(e=>{
            return _fakin().then(res=>{
                 // do something  
            })
        }).then(res=>{
            return _errFakin().then(res=>{
                 // do something  
            })
        })
    }

如果功能越来越复杂,那么会有很多then

Async版本Promise

async function fakin(){
    let v;
    try{
        v= await _fakin()
    } catch(e){
        v = await _errFakin(e);
    }
    return processDataInWorker(v)//没有await关键字,因为async函数本身就会隐式的返回一个Promise对象
}

你可能感兴趣的:(前端)