async/await 的主要使用

前言

对于回调来讲，Promise 的到来看似只解决了回调场景中的状态处理问题，但是JavaScript中令人头疼不是回调，而是 回调嵌套。同时，Promise的出现，也不能彻底解决回调嵌套的带来的代码维护和可读性的问题。

• 原生回调嵌套

function increase(num, callback) {
   setTimeout(() => {
     if( !(num >= 0) ) {
       callback(new Error('The parameters must be greater than zero'), null)
     } else {
      let result = num + 1;
      callback(null, result);
     }
   }, 100)
}
increase(1, (err, result1) => {
  if(!err) {
    console.log(`result1 = ${result1}`)
    increase(result1, (err, result2) => {
      if(!err) {
        console.log(`result2 = ${result2}`)
        increase(result2, (err, result3) => {
          if(!err) {
            console.log(`result3 = ${result3}`)
          } else {
            console.log(err)
          }
        })
      } else {
        console.log(err)
      }
    })
  } else {
    console.log(err)
  }
})
// 运行结果
// "result1 = 2"
// "result1 = 3"
// "result1 = 4"

• Promise 处理回调嵌套

function increase(num) {
   return new Promise((resolve, reject) => {
      setTimeout(() => {
       if( !(num >= 0) ) {
         reject(new Error('The parameters must be greater than zero'))
       } else {
        let result = num + 1;
        resolve(result);
       }
     }, 100)
   })
}
increase(1).then((result1) => {
  console.log(`result1 = ${result1}`)
  increase(result1).then((result2) => {
    console.log(`result2 = ${result2}`)
    increase(result2).then((result3) => {
      console.log(`result3 = ${result3}`)
    }).catch(err => console.log(err));
  }).catch(err => console.log(err));
}).catch(err => console.log(err));
// 运行结果
// "result1 = 2"
// "result1 = 3"
// "result1 = 4"

所以这时候，需要一个更优雅处理Promise 嵌套任务 的语法，因此，async/await 就横空出世，也就是直接或间接解决了 回调嵌套 的问题。

一句话，async/await 的出现是为了解决回调嵌套的操作繁琐和可读性差的问题。

aysnc/await的使用

• async 是 声明 在回调环境函数
• await 是 运行 在等待回调结果过程中
• Promise 是封装了回调操作的 原子任务

举一个简单的例子

// 封装原子任务
function increase(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if( !(num >= 0) ) {
        reject(new Error('The parameters must be greater than zero'))
      } else {
        resolve(num + 1)
      }
    }, 100);
  }).catch(err => console.log(err))
}
// 声明任务环境
async function envIncrease() {
  let num = 1;
  // 等待回调任务结果1返回
  let result1 = await increase(num);
  console.log(`result1 = ${result1}`);
  // 等待回调任务结果2返回
  let result2 = await increase(result1);
  console.log(`result2 = ${result2}`);
  // 等待回调任务结果3返回
  let result3 = await increase(result2);
  console.log(`result3 = ${result3}`);
  return result3
}
// 声明任务环境
async function env() {
  // 等待 环境 Increase 的结果返回
  let result = await envIncrease()
  console.log(`result = ${result}`);
}
// 运行环境
env()
// 运行结果
// "result1 = 2"
// "result1 = 3"
// "result1 = 4"