async、await和Promise的关系

async/await是一个很重要的语法糖，他的作用是用同步的方式，执行异步操作。

async

async声明function是一个异步函数，返回一个promise对象，可以使用 then 方法添加回调函数。async函数内部return语句返回的值，会成为then方法回调函数的参数。

async function fn() {
  return 'test';

console.log(fn()); // Promise { 'fn' }

// async返回的是一个promise对象
test().then(res=>{
  console.log(res); // test
})

// 如果async函数没有返回值 async函数返回一个undefined的promise对象
async function fn() {
  console.log('不返回');
}
console.log(fn()); // Promise { undefined }

await

await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果，也就是说它会阻塞后面的代码，等待 Promise 对象结果。如果等待的不是 Promise 对象，则返回该值本身。

在async函数中，await规定了异步操作只能一个一个排队执行，从而达到用同步方式，执行异步操作的效果，注意：await只能在async函数中使用，不然会报错。

作用

比如要请求两个接口，要用接口1返回的数据去请求接口2一般会这样写

function request(n) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(n * 2)
    }, 1000)
  })
}

request(5).then(res1 => {
  console.log(res1) // 1秒后 输出 10

  request(res1).then(res2 => {
    console.log(res2) // 2秒后 输出 20
  })
})

但是如果嵌套过多会降低可读性，这时可以用async/await来解决

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

如果await后面是 正常的表达式则立即执行。

function request(num) { 
  setTimeout(() => {
    console.log(num * 2)
  }, 1000)
}

async function fn() {
  await request(1) // 2
  await request(2) // 4
  // 1秒后执行完  同时输出
}
fn()
。