async/await

25 阅读2分钟

async/await 是 ES2017 中引入的一种处理异步操作的方式,它通过使用 async 和 await 关键字来让异步代码看起来更像同步代码,使用起来更加简单明了。以下是 async/await 的使用案例,包括代码示例和注释:

  1. 使用 async/await 处理 Promise 对象 使用 async/await 可以让 Promise 对象的处理更加简单明了,不需要写大量的 then 和 catch 方法。
javascriptCopy code
function wait(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('等待了 ' + time + ' 毫秒');
    }, time);
  });
}
async function test() {
  try {
    let result = await wait(2000);
    console.log(result); // 输出 "等待了 2000 毫秒"
  } catch (error) {
    console.log(error);
  }
}
test();
  1. 使用 async/await 处理多个 Promise 对象 使用 Promise.all 方法和 async/await 可以同时处理多个异步操作,通过 await 关键字等待所有异步操作完成后再进行下一步操作。
javascriptCopy code
function wait(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('等待了 ' + time + ' 毫秒');
    }, time);
  });
}
async function test() {
  try {
    let [result1, result2, result3] = await Promise.all([wait(2000), wait(1000), wait(1500)]);
    console.log(result1); // 输出 "等待了 2000 毫秒"
    console.log(result2); // 输出 "等待了 1000 毫秒"
    console.log(result3); // 输出 "等待了 1500 毫秒"
  } catch (error) {
    console.log(error);
  }
}
test();
  1. 使用 async/await 处理多个异步操作的结果 使用 async/await 可以更容易地处理多个异步操作的结果,通过 await 关键字依次等待每个异步操作完成后再进行下一步操作。
javascriptCopy code
function wait(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(time);
    }, time);
  });
}
async function test() {
  try {
    let result1 = await wait(2000);
    console.log(result1); // 输出 2000
    let result2 = await wait(1000);
    console.log(result2); // 输出 1000
    let result3 = await wait(1500);
    console.log(result3); // 输出 1500
    let result4 = result1 + result2 + result3;
    console.log(result4); // 输出 4500
  } catch (error) {
    console.log(error);
  }
}
test();
  1. 使用 async/await 处理异步操作的错误 使用 try/catch 语句和 async/await 可以更容易地处理异步操作的错误。
javascriptCopy code
function wait(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      if (time < 1500) {
        reject('等待时间太短');
      } else {
        resolve('等待了 ' + time + ' 毫秒');
      }
    }, time);
  });
}
async function test() {
  try {
    let result1 = await wait(2000);
    console.log(result1); // 输出 "等待了 2000 毫秒"
    let result2 = await wait(1000);
    console.log(result2); // 不会执行到这里
  } catch (error) {
    console.log(error); // 输出 "等待时间太短"
  }
}
test();