async,await的使用

async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

async

• async函数返回一个promise对象

async function fn () {
  return 'async 函数'
}
console.log(fn());

image.png

• async，异步的意思，表示不会阻塞后面的同步代码,因为是promise对象，我们用then来获取数据

async function fn () {
  return 'async 函数'
}
fn().then(value => {
  console.log(value);
})    
console.log('我会先执行');

image.png

• 处理异常,如果函数内部有返回一个值，内部会调用Promise.resolve函数返回值，如果抛出错误，内部会调用Promise.reject函数，返回错误信息；我们可以用catch方法接受这个错误信息

async function fn (flag) {
  if (flag) {
    return 'success'
  } else {
    throw 'fail'
  }
}

console.log(fn(true)); //Promise {<fulfilled>: 'success'}
console.log(fn(false)); //Promise {<rejected>: 'fail'}

fn(false).then(value => {
  console.log(value);
}).catch (e => {
  console.log(e); //fail
}) 

await

• await操作符必须写在async函数内部，否则会报错

• 用于等待一个Promise 对象或者任何要等待的值

• 返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

• await操作符会暂停当前async函数的执行，等待promise执行结束

//若正常处理(fulfilled)
async function fn () {
  let f = await Promise.resolve(100)
  console.log(f); //100
}
fn()

//若抛出异常(rejected)
async function fn () {
  try {
    await Promise.reject('出错了')
  } catch (e) {
    console.log(e); //出错了
  }
}
fn()

//如果返回值不是promise,会当作正常处理的值返回
async function fn () {
  let f = await 20
  console.log(f); //20
}
fn()

使用场景

我们会在什么场景下使用async,await?

• promise解决了回调地狱的问题，而async,await来进一步优化它
• 处理多重then方法的调用

var num = function (n) {
  return new Promise ((resolve, reject) => {
    setTimeout(resolve, n, n * 10)
  })
}

let step1 = function (n) {
  console.log('step1 ' + n);
  return num(n)
}
let step2 = function (n) {
  console.log('step2 ' + n);
  return num(n)
}
let step3 = function (n) {
  console.log('step3 ' + n);
  return num(n)
}

//使用then链处理

function deal () {
  var n1 = 10
  step1(n1).then(n2 => step2(n2))
          .then(n3 => step3(n3))
          .then(res => res)
}

deal()

//使用`async,await`处理

async function deal () {
  let n1 = 10
  let n2 = await step1(n1)
  let n3 = await step2(n2)
  let res = await step3(n3)
  return res
}

deal()

可以明显看出使用async,await之后，我们可以像使用同步代码一样处理异步任务，体验更佳