js await是同步还是异步|极客笔记

js await是同步还是异步

在JavaScript中，await关键字通常与async函数一起使用，用于处理异步操作。await可用于等待一个返回Promise的表达式，然后暂停函数的执行，直到该Promise解析为resolve状态并返回结果。

JavaScript中的异步编程

在了解await关键字之前，我们先了解一下JavaScript中的异步编程。

JavaScript是一种单线程语言，这意味着一次只能执行一个任务。当代码执行一个长时间运行的操作时（例如网络请求或文件读取），为了不阻塞其他代码的执行，JavaScript会采用异步方式处理这些操作。常用的异步操作包括AJAX请求、定时器以及Promise等。

相比于同步操作，异步操作能够提高应用程序的响应性能，并且避免阻塞其他任务的执行。但是，异步编程也给代码的编写和维护带来了一定的困扰。

async/await简介

为了简化JavaScript中的异步编程，ES2017引入了async/await语法。

通过在函数前加上async关键字，可以将一个普通函数定义为异步函数。异步函数中可以使用await关键字来等待一个返回Promise的表达式。

await表达式会暂停函数的执行，直到Promise解析为resolve状态，并返回解析的结果。在等待的过程中，JavaScript会继续执行其他任务，从而提高了代码的并发性。

`await`的工作原理和用法

在异步函数中使用await关键字时，await后面通常是一个返回Promise对象的表达式。await会暂停函数的执行，直到该Promise对象解析为resolve状态。

下面是await的基本用法：

async function getData() {
  const result = await fetch('https://api.example.com/data');
  const data = await result.json();
  console.log(data);
}

getData();

在上面的示例中，fetch函数返回了一个Promise对象。await fetch(...)等待该Promise对象解析为resolve状态，并返回结果。然后，我们再次使用await等待result.json()的返回结果。

await后面的表达式可以是任何返回Promise对象的操作，例如在数据库中查询数据、发送网络请求、读取文件等。

`await`的同步和异步特性

尽管await关键字的语法看起来类似于同步代码，但它实际上是一种异步的特性。使用await会暂停函数的执行，并等待Promise对象解析为resolve状态。

暂停函数的执行并不意味着整个JavaScript的执行也被暂停了。在执行到await的时候，JavaScript会继续执行其他任务，如果有其他异步操作，它们可以并发执行。

下面是一个示例说明await的异步特性：

async function getData() {
  console.log('Start');
  const result = await someAsyncFunction();
  console.log(result);
  console.log('End');
}

function someAsyncFunction() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Async operation result');
    }, 2000);
  });
}

getData();

在上面的示例中，someAsyncFunction函数返回一个延迟2秒后解析为resolve状态的Promise对象。在异步函数getData中，我们使用await someAsyncFunction()等待该Promise对象。

运行上述代码，会输出以下结果：

Start
Async operation result
End

由于await的异步特性，await someAsyncFunction()会让函数暂停2秒钟，等待Promise对象解析为resolve状态。在等待期间，JavaScript会继续执行其他任务，例如打印Start和End。

错误处理

当await后的Promise解析为reject状态时，可以使用try/catch语句来捕获并处理错误。

下面是一个示例：

async function getData() {
  try {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error.message);
  }
}

getData();

以上代码中，如果fetch或result.json()返回的Promise对象解析为reject状态，catch块中的代码将会执行，打印错误消息。

注意事项

在使用await时，需要注意以下几点：

1. `await`只能在`async`函数内部使用

await关键字只能在异步函数内部使用。在普通的函数或全局作用域中，不能使用await。

2. `await`后面可以是任何返回`Promise`的表达式

await后面可以是任何返回Promise对象的操作。例如，可以使用await等待一个数据库查询、一个网络请求或一个文件读取操作的完成。

3. `await`会返回`Promise`对象的解析结果

await会暂停函数的执行，直到等待的Promise对象解析为resolve状态，并返回解析的结果。

4. `try/catch`可用于捕获错误

当await后的Promise解析为reject状态时，可以使用try/catch语句来捕获错误并进行错误处理。

总结

await关键字是JavaScript异步编程中的一项重要特性。它可以让我们以同步的方式编写异步代码，提高了代码的可读性和可维护性。使用await可以暂停函数的执行，等待Promise对象解析为resolve状态，并返回结果。同时，通过try/catch语句可以方便地处理可能发生的错误。

尽管await的语法看起来像同步代码，但它实际上是异步的。使用await并不会阻塞JavaScript线程的执行，而是允许其他任务并发执行。

通过合理地使用await，我们可以更好地处理异步操作，并使代码更具可读性和可维护性。