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

image.png

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()处理。
目前看不出我们的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秒

image.png

（ps:result is 4000 是因为3000+1000）

有没有感觉不用跟繁琐的链式打交道了。其实需求一变的话，会更明显。如果我们需求第一步第二步第三步分布别为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}`)
}

image.png

可以明显感觉到输出间隔1秒 3秒 6秒
最后输出7是因为我们的6在step3内getTime(6000)加1000ms变成7000

这个时候感觉到async/await的便捷之处了吗？一个是繁琐的链式写法，调用和用阅读性较差，而使用async/await，让代码如同步代码般顺畅丝滑。除了写法方便，不知道大家发现了没，我们的参数可以直接调用,这个的方便之处不是简单的promise链式调用可以媲美的。
转载自本人思否：超人思否