javascript 高级编程系列 - async/await

async/await其实是生成器的语法糖，async用于声明一个函数是异步的，而await用于等待一个异步方法执行完成,并且await只能出现在async函数中。

1. async 函数

async函数返回一个Promise对象，因此可以使用Promise对象的相关方法去进 一步处理async函数返回的结果。

async function asyncFn(){
  return 'test async';
}
let promise = asyncFn();
promise.then((value)=> {
  console.log(value); // 'test async'
});

2. await 关键字

await 等待任意表达式的结果，可以是一个普通函数调用也可以是一个异步事件处理，或者一个表达式。

function doSomething(){
  return 'test';
}

async function asyncTest1(){
  return Promise.resolve('test1');
}

async function asyncTest2(){
  const res1 = await doSomething();
  const res2 = await asyncTest1();
  console.log(res1, res2); // test test1
  return 'test2';
}

const res = asyncTest2();
console.log(res); // Promise {pending}
res.then(v => console.log(v)); // 'test2'

3. async/await 处理异步编程

处理多个异步操作的链式调用的时，可以使用async/await进行进一步优化编程方式,使其更像是同步操作。

• Promise的链式调用

const excuteAsyncTask = (n) => {
  return new Promise((resolve, reject)=> {
    setTimeout(()=> resolve(n+1), 200);
  });
};

const step1 = (n) => { console.log('step1');  return excuteAsyncTask(n); };
const step2 = (n) => { console.log('step2');  return excuteAsyncTask(n); };
const step3 = (n) => { console.log('step3');  return excuteAsyncTask(n); };

const doTask = () => {
  step1(0)
  .then(v1 => step2(v1))
  .then(v2 => step3(v2))
  .then(v => {
    console.log(v);
  });
};
doTask();  //step1 step2 step3 3

• async/await

const excuteAsyncTask = (n) => {
  return new Promise((resolve, reject)=> {
    setTimeout(()=> resolve(n+1), 200);
  });
};
const step1 = (n) => { console.log('step1');  return excuteAsyncTask(n); };
const step2 = (n) => { console.log('step2');  return excuteAsyncTask(n); };
const step3 = (n) => { console.log('step3');  return excuteAsyncTask(n); };
const doTask = async () => {
  const v1 = await step1(0);
  const v2 = await step2(v1);
  const v3 = await step3(v2);
  console.log(v3);
};
doTask();  //step1 step2 step3 3

4. async/await捕获异常

const doTask = async () => {
  try {
    let a = await Promise.reject('reject');
  } catch(error){
    console.log(error); // reject
  }
};
doTask();

5. async/await 的优点

• 代码书写更加同步, 相对链式调用可读性更强。
• 错误处理更加友好, 使用try catch 语句能更好的捕获错误
• 调试更加方便，Promise的链式调用，调试器无法进入代码块