async 和 await

参考原文：https://segmentfault.com/a/1190000007535316
同时参考：http://www.ruanyifeng.com/blog/2015/05/async.html

---

async 起什么作用

首先我们看看 async 函数的返回值是什么：

const testAsync = async () => {
  return "hello";
}

const result = testAsync();
console.log(result);

// 输出
// Promise { 'hello' }

可见 async 的返回值是一个 Promise 对象。

async 函数（包含函数语句、函数表达式、Lambda 表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

既然 async 返回一个 Promise 对象，我们来通过 then 函数查看下：

const testAsync = async () => {
  return "hello";
}

const result = testAsync();

result.then((data) => {
  console.log(data)
})

// 输出
// hello

如果 async 函数没有返回值，它会返回 Promise.resolve(undefined)。

const testAsync = async () => {}

const result = testAsync();
console.log(result);

// Promise { undefined }

在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且不会阻塞后面的语句。

const testAsync = async () => {
  setTimeout(() => {
    console.log('hello');
  }, 100);
}

testAsync();
console.log('world');

// 输出
// world
// hello

可见使用了 setTimeout 的 async 的函数并不会阻塞后面语句的执行。

这和普通返回 Promise 对象的函数并无二致。那么下一个关键点就在于 await 关键字的作用了。

---

await 的作用

await 顾名思义是 async wait，等待异步操作的完成。如果它等到的是一个 Promise 对象，await 就会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

const takeLongTime = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve("hello"), 1000);
  });
}

const test = async () => {
  console.log(await takeLongTime());
  console.log('world');
}

test();

// 输出
// hello
// world

---

错误处理

await 关键字后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}