async/await

Promise 只解决了回调场景中的状态处理问题，没有解决回调嵌套问题，也没有解决回调嵌套的可读性问题

async/await 是一个语法糖，本质还是一个 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
// result2 = 3
// result3 = 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
// result2 = 3
// result3 = 4

async/await 解决回调嵌套

async 声明回调环境函数 await 是运行等待回调结果中

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
// result2 = 3
// result3 = 4
// result = 4

如何捕获 async/await 的异常

1. try/catch

async function getData() {
  try {
    const result = await AsyncApi();
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}
getData();
// 输出
// ReferenceError: AsyncApi is not defined

2. to.js

function catchError(promise) {
  if (!promise || !Promise.prototype.isPrototypeOf(promise)) {
    return new Promise((resolve, reject) => {
      reject(new Error('requires promises as the param'));
    }).catch((err) => {
      return [err, null];
    });
  }
  return promise
    .then(function() {
      return [null, ...arguments];
    })
    .catch((err) => {
      return [err, null];
    });
}
function getData2() {
  return new Promise((resolve, reject) => {
    resolve(1);
  });
}
async function asyncFunc() {
  const [err, result] = await catchError(getData2());
  if (err) {
    console.log('Promise有错:', err);
  } else {
    console.log(result);
  }
}
asyncFunc();
// 输出
// 1