前端面试题 - 22. async/await, generator, promise这三者的关联和区别是什么?

472 阅读3分钟

区别和联系

async/await,generator 和 promise 都是用于处理异步操作的 JavaScript 语言特性。它们之间有一些关联和区别。

关联:

  1. async/await 和 generator 都是异步编程的语言特性,它们都可以让开发者使用同步的方式编写异步代码。但是,它们的语法和使用方式不同。
  2. async/await 和 promise 之间有很紧密的联系。async/await 是对 promise 的语法糖,它可以让我们使用类似同步代码的方式处理 promise。
  3. generator 和 promise 之间也有联系。可以使用 yield 关键字来暂停 generator 函数的执行,等待异步操作完成后再继续执行。而 promise 则可以作为 generator 函数的返回值来完成异步操作。

区别:

  1. async/await 和 generator 的语法和使用方式不同。async/await 使用 async 和 await 关键字,可以让我们在函数中使用 await 关键字来等待异步操作完成。而 generator 使用 function* 关键字来定义生成器函数,使用 yield 关键字来控制生成器函数的执行流程。
  2. promise 是一种异步编程的基础,它可以让我们使用 then 和 catch 方法来处理异步操作的结果和错误。而 async/await 和 generator 则是在 promise 基础之上的语言特性,它们可以让我们更加便捷地处理异步操作。
  3. async/await 和 generator 都可以让我们使用同步的方式编写异步代码,但是 async/await 更简洁易懂,而且可以处理更多的异步场景。同时,async/await 也可以像 promise 一样处理错误。 总之,async/await,generator 和 promise 都是用于处理异步操作的 JavaScript 语言特性,它们各有优缺点,可以根据具体场景选择使用。

示例

以下是一个使用 promise 的示例代码:

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}
delay(2000).then((time) => {
  console.log(`Delay ${time}ms`);
}).catch((error) => {
  console.log(error);
});

这个示例代码定义了一个 delay 函数,该函数返回一个 promise 对象,该对象在指定时间后将解决(resolve)并返回时间本身。然后我们使用 then 方法来处理异步操作的结果,并将结果打印到控制台上。

以下是一个使用 async/await 的示例代码:

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}
async function delayTime() {
  try {
    const time = await delay(2000);
    console.log(`Delay ${time}ms`);
  } catch (error) {
    console.log(error);
  }
}
delayTime();

这个示例代码也定义了一个 delay 函数,该函数返回一个 promise 对象。然后我们定义了一个 async 函数 delayTime,并在函数中使用 await 关键字来等待异步操作完成。最后,我们使用 try-catch 语句来处理异步操作的结果和错误,并将结果打印到控制台上。 以下是一个使用 generator 的示例代码:

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}
function* delayTime() {
  try {
    const time = yield delay(2000);
    console.log(`Delay ${time}ms`);
  } catch (error) {
    console.log(error);
  }
}
const generator = delayTime();
const result = generator.next();
result.value.then((time) => {
  generator.next(time);
}).catch((error) => {
  generator.throw(error);
});

这个示例代码也定义了一个 delay 函数,该函数返回一个 promise 对象。然后我们定义了一个生成器函数 delayTime,并在函数中使用 yield 关键字来控制异步操作的执行流程。最后,我们使用生成器对象的 next 和 throw 方法来处理异步操作的结果和错误,并将结果打印到控制台上。