async、 await、 promise看完不会算我输

async

JavaScript 中的 async/await 是promise的语法糖，这个糖好吃不腻还贼甜。除了 IE 之外，常用浏览器都已经支持该特性。首先需要明确一下，async和await这两个并非一定要一起使用！

1、async单独使用

async function foo() {
   return 1
}

这个等价于：

function foo() {
   return Promise.resolve(1)
}

输出结果：

 Promise {<fulfilled>: 1}

async 函数返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

2、await

注意，await必须要和async一块，否则会报错。

function dosomething() {
    return "dosomething";
}

async function Async() {
    return Promise.resolve("async");
}

async function test() {
    const v1 = await dosomething();
    const v2 = await Async();
    console.log(v1, v2);
}

test();

结果：

当await等到的不是一个peomise对象则直接输出等到的结果，当等到的是promise对象则会阻塞下面代码运行，直到返回结果。
有人会问如果返回值是reject怎么办？

async function test() {
  try {
    await anythingelse();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function test() {
  await anythingelse().catch(function (err){
    console.log(err);
  });
}

3、如何优雅的解决回调？

function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

如何顺序执行step?

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

看结果：

甜不甜？