async/await的使用方法

1.async的基本形式和用法

首先看一个基本写法：

async function demoFunc () {
  return new Promise((resolve,  reject) => {
    resolve('hello world')
  })
}

async 写在函数前，返回一个Promise对象

• 当返回值不是一个promise对象时，会被强转成promise对象

async function asyncFunc () {
  return 'hello world'
}

经过控制台 能够看到，返回了一个Promise

2.await

await操做只能用在async函数中，不然会报错。

arg = await awaitFunc

awaitFunc能够是任何值，一般是一个promise

3.async和await基本使用

写一个函数，返回promise对象，该函数会在2s后输出参数信息

function printName(name) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve(name)
      }, 2000)
  } )
}

而后再写一个async函数，此时就能够用上咱们的await关键字，由于await后一般放的是一个promise对象，因此能够写上以上的调用

async function getName() {
  let name = await printName('jack')
  console.log('hello ', name)
}
getName() // 2s后 输出hello jack

代码的执行过程是调用了getName方法，遇到了await，await表示代码在这里暂停了，再也不向下执行，等待promise对象执行完毕，拿到promise resolve的值并返回后，再继续向下执行。

• 若此时promise对象抛出了错误呢？

咱们能够用try catch

function printName(name) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          throw new Error('出错了') // 模拟报错
          resolve(name)
      }, 2000)
  } )
}
async function getName () {
  try {
    let name = await printName('jack')
    console.log('hello ', name)
  } catch (err) {
    console.log(err, ' 被catch抓到啦')
  }
}
getName() // 控制台输出 出错了 被catch抓到啦

也可使用promise的.then() .catch()表达式,等价为

function printName(name) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          throw new Error('出错了') // 模拟报错
          resolve(name)
      }, 2000)
  } )
}
async function getName () {
    let name = await printName('jack')
    return name
}
// 由于在最前面咱们就知道，async返回的是一个promise对象，此处的getName其实也就是一个promise对象
getName().then((name)=> {
    console.log('hello ', name)
}).catch((err) => {
    console.log(err, ' 被catch抓到啦')
}) // 会进入catch

目前看不出咱们的async和await有什么妙用。让咱们来多写几个，妙用初体验

async function getName() {
  let name1 = await printName('Jack')
  let name2 = await printName('Bob')
  let name3 = await printName('Cindy')
  console.log('hello ', name1, ' ', name2, ' ', name3)
}
getName() // 6s后输出 hello Jack Bob Cindy

有没有感受本身在写正常的同步代码了？爽吗？还能够更爽，咱们继续看例子
如今要求使用promise写一个函数，要求第一步消耗1秒，第二步消耗2秒，第三步消耗3秒，总时间是1+2+3一共6秒，咱们看看promise的链式写法

function getTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 1000), n)
    })
}

function step1(n) {
    console.log(`步骤1消耗${n}秒`)
    return getTime(n)
}

function step2(n) {
    console.log(`步骤2消耗${n}秒`)
    return getTime(n)
}

function step3(n) {
    console.log(`步骤3消耗${n}秒}`)
    return getTime(n)
}
// promise链式写法
function doThis() {
    const time1 = 1000
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(retult => {
            console.log('retult is 'retult)
        })
}
// async函数写法
async function doThis() {
    const time1 = 1000
    const time2 = await step1(time1)
    const time3 = await step2(time2)
    const result = await step3(time3)
    console.log(`result is ${result}`)
}
doThis()

看看运行结果，输出的时间间隔能够感觉到是1秒，2秒，3秒

有没有感受不用跟繁琐的链式打交道了。其实需求一变的话，会更明显。若是咱们需求第一步 第二步 第三步分布别为1秒2秒3秒不变。追加需求，第二步须要加上第一步的时间，第三步要加第二步的时间，即第一步1秒，第二步1+2=3秒，第三步3+3=6秒，一共9秒，咱们先看看链式写法

function step1(n) {
    console.log(`步骤1消耗${n}秒`)
    return getTime(n);
}

function step2(m, n) {
    console.log(`步骤2消耗${m} and ${n}秒`);
    return getTime(n);
}

function step3(k, m, n) {
    console.log(`步骤3消耗${k}, ${m} and ${n}秒`)
    return getTime(k + m + n);
}
// Promise方式调用
function doThis() {
    const time1 = 1000
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`)
        });
}

// async/await方式调用
async function doThis() {
    const time1 = 1000
    const time2 = await step1(time1)
    const time3 = await step2(time1, time2)
    const result = await step3(time1, time2, time3)
    console.log(`result is ${result}`)
}

能够明显感受到输出间隔1秒 3秒 6秒
最后输出7是由于咱们的6在step3内getTime(6000)加1000ms变成7000

这个时候感受到async/await的便捷之处了吗？除了写法方便，不知道你们发现了没，咱们的参数能够直接调用...改天补充，有急事