本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一. 什么是async

开发中我们最常用的Promise有一个语法糖，就是async，翻译成中文是异步；它是一个修饰符，作用是将函数标记为异步函数，同时这个函数的返回值变成promise。

    async function foo() {
      return ["abc", "cba", "nba"]
    }

    foo2().then(res => {
      console.log("res:", res)
    })

二. 什么是await

await翻译成中文是等待，必须放在async修饰的函数中使用；await修饰的如果是promise对象，那么可以获取到promise中返回的内容（resolve、reject函数），且获取到值才会继续执行该函数的代码；如果修饰的不是promise，那么就会将值作为await表达式的结果，不会起到阻塞函数内代码的作用，所以最常用的才是修饰promise函数。

    function foo(t){
      setTimeout(function(){
          console.log(t);
      },t)
    }
    async function foo1(){
        let a = await foo(1000);
        let b = await log(3000);
        let c = log(2000);
        console.log(a);
        console.log(1)
    }
    foo1(); 
// 输出结果为：undefined、1、1000、2000、3000
// 解析：因为foo函数不是Promise函数，所以await只会将它作为一个返回值，不会阻塞后面的代码执行，所以刚开始的a是undefined，加不加await对这个函数的执行没有什么影响，三个定时器依旧按照等待时间长短先后执行。 

    function bar() {
      console.log("bar function")
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(123)
        }, 1000)
      })
    }

    async function foo() {
      console.log("-------")
      // await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码
      const res1 = await bar()
      console.log("await后面的代码1:", res1)
      const res2 = await bar()
      console.log("await后面的代码2:", res2)
      console.log("+++++++")
    }


    function foo1(){
      return new Promise((resolve,reject)=> {
        console.log(123321);
        resolve('abc')
      })
    }
    foo()
    foo1().then(res=>console.log(res))
    console.log(123);

// 输出结果：----、bar function、123321、123、abc、await后面的代码1:123、、bar function、await后面的代码2:123、++++++
// 解析：await修饰的Promise函数，所以在输出完-----后，遇到await就会去先执行Promise，输出bar function，代码被阻塞,输出foo1以及后面的代码，当后面代码执行完，开始执行async函数内代码

三. 常规结合起来使用方法

一般用于网络请求，不用再then回调，写法会更加美观

    function requestData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('网络请求结果')
        }, 2000);
      })
    }

    async function getData() {
      const res = await requestData()
      console.log(res1)
    }

    getData()