关于标题

为什么，async这颗糖很甜，也很咸呢？
大家都知道，async函数是Generator函数的语法糖，那什么是Generator函数呢？如果你还没了解Generator，Generator异步调用，这篇文章为你介绍了Generator函数的原理和使用方法。
我们先来看一个最简单的Generator函数

function * generator(x){
    var y  = yield x + 1;
    return y;
}
var gen = generator();
gen.next(1); //{value:2,done:false}

这个案例是最简单的Generator函数的实现，我们再来看一下，async函数的简单例子

async function generator(x){
    var y = await x + 1;
    return y;
    }
genertor(1).then(value => console.log(value)); //2

async真甜

对标Generator

对比上面两段代码，明显感觉到，使用async后，代码变得更加清晰，同时，不再需要手动调用next方法，就行实现异步加载，当然，为了代码清晰，上面的代码并没用异步调用，正常情况下，await后面的表达式为promise对象。
相对于Generator函数，async有下面几点好处：

内置执行器。
更好的语义化。
更广的适用性。
返回Promise对象。
我们分别来解释一下上面的几点好处：
第1点，内置执行器，在以前的文章我们讲到过，Generator函数如果想自动执行，需要引入CO模块，而async不必，内置了执行器，可自动执行异步调用，获得结果后，再继续执行。第2点，更好的语义化，这个从字面上就能看得出来，很明显，async函数更像是同步函数。
第3点，更广的适用性，看过Generator函数那节课的同学都能知道，yield后面只能适用promise对象或者是thunk 函数（最新版本只能使用promise对象），async函数不必，就像例子，可接原始类型的值。
第4点，很重要的一点。async函数返会的值是promise对象，还是上面的例子，虽然return y，但是，运行函数后，返回的是promise对象。而Generator函数返回的是Iterator函数。如果有小伙伴不知道什么事Iterator函数的，给你个链接Iterator函数。看完，你就知道，async函数有多好用。

用代码说话

先定义一个 Fetch 方法用于获取 github user 的信息：

function fetchUser() { 
    return new Promise((resolve, reject) => {
        fetch('https://api.github.com/users/superman66')
        .then((data) => {
            resolve(data.json());
        }, (error) => {
            reject(error);
        })
    });
}

Promise 方式

function getUserByPromise() {
    fetchUser()
        .then((data) => {
            console.log(data);
        }, (error) => {
            console.log(error);
        })
}
getUserByPromise();

使用promise后，代码的执行变的很清晰，这能解决我们当前问题，但有一种情况，如果我们的需求有多次请求，切每次请求都需要上次请求的结果，这就变的很麻烦了。当然，有的小伙伴说了，那我们就可以继续的then()下去啊，可以，绝对可以，但是，随着请求次数的增多，代码中出现更多数量的then，如果不加以注释，也会变的晦涩难懂，这不是我们想要的结果。继续。。。 Generator 方式

function* fetchUserByGenerator() {
    const user = yield fetchUser();
    return user;
}
const g = fetchUserByGenerator();
const result = g.next().value;
result.then((v) => {
    console.log(v);
}, (error) => {
    console.log(error);
})

Generator 的方式解决了 Promise 的一些问题，流程更加直观、语义化。但是 Generator 的问题在于，函数的执行需要依靠执行器，每次都需要通过 g.next() 的方式去执行。
async 方式

async function getUserByAsync(){
     let user = await fetchUser();
     return user;
 }
getUserByAsync()
.then(v => console.log(v));

哇。。。同样的结果，async像丝般顺滑，搞定了。真甜。。。

关于async函数的返回值

前文说到，async函数返回一个Promise对象。

async function generator(x){
    var y = await x + 1;
    return y;
    }
genertor(1).then(value => console.log(value)); //2

promise函数then方法的执行前提是，await后面的表达式以获取到值。然后将值以参数的形式传入后面的函数中（例子中直接在控制台中打印出来）。 await后面可以是promise对象，也可以是基础数据。async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return 'done';
}

f().then(v => console.log(v)); // 等待6s后才输出 'done'

正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个立即 resolve 的 Promise。

async function  f() {
    return await 1
};
f().then( (v) => console.log(v)) // 1

关于错误捕获

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了

上面代码中，async函数f执行后，await后面的 Promise 对象会抛出一个错误对象，导致catch方法的回调函数被调用，它的参数就是抛出的错误对象。防止出错的方法，也是将其放在try...catch代码块之中。

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('hello world');
}

如果有多个await命令，可以统一放在try...catch结构中。

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

吃多可能也会咸

再次解析一下async 函数的执行方式

当我们在编写JavaScript异步代码的时候,人们经常在一个接着一个的函数调用前面添加await关键字.这会导致性能问题,因为在通常情况下,一个语句的执行并不依赖前一个语句的执行,但是因为添加了await关键字,你仍旧需要等待前一个语句执行完才能执行一个语句.

(async () => {
  const pizzaData = await getPizzaData()    // async call
  const drinkData = await getDrinkData()    // async call
  const chosenPizza = choosePizza()    // sync call
  const chosenDrink = chooseDrink()    // sync call
  await addPizzaToCart(chosenPizza)    // async call
  await addDrinkToCart(chosenDrink)    // async call
  orderItems()    // async call
})()

解释： 1.获得披萨的列表. 2.获得饮料的列表. 3.从披萨列表中选择披萨. 4.从饮料列表中选择饮料. 5.把选择的披萨加入购物车 6.把选择的饮料加入购物车. 7.确认订单错误：获得披萨列表和饮料列表可以同时进行，没必要等待获取披萨列表后再去获取饮料列表。如何解决这个问题呢？

async function selectPizza() {
  const pizzaData = await getPizzaData()    // async call
  const chosenPizza = choosePizza()    // sync call
  await addPizzaToCart(chosenPizza)    // async call
}

async function selectDrink() {
  const drinkData = await getDrinkData()    // async call
  const chosenDrink = chooseDrink()    // sync call
  await addDrinkToCart(chosenDrink)    // async call
}

(async () => {
  const pizzaPromise = selectPizza()
  const drinkPromise = selectDrink()
  await pizzaPromise
  await drinkPromise
  orderItems()    // async call
})()

// 我更喜欢下面这种实现.
(async () => {
  Promise.all([selectPizza(), selectDrink()]).then(orderItems)   // async call
})()

很清晰的展现出，代码的执行顺序，相较于上一个，性能有了明显的提高。 ##总结还是题目的那句话，async函数很甜，也很咸。不要过分的去使用async/await，因为完全不影响异步执行的操作，如果非要同步执行，随着调用接口的增加，回严重影响性能。瑕不掩瑜，async的便利性，很大程度上会减少开发量，同时代码的可读性也有很大的提高。

如果你觉得这篇文章对你有帮助，别忘了给点个赞呦～
每周会给大家分享一到两篇文章，希望跟大家一起学习，一起进步。