js await|极客笔记

js await

js await介绍

在JavaScript中，Async/Await是一种处理异步代码的特殊语法。它基于Promise和Generator的概念，并提供了一种更简洁、可读性更强的方式来处理异步操作。本文将详细介绍Async/Await的语法及其使用场景，并给出一些示例代码来帮助理解。

js Async函数

在使用Async/Await之前，我们首先需要了解Async函数的概念。Async函数是使用Async关键字声明的函数，它会返回一个Promise对象。在Async函数中，我们可以通过使用Await关键字来暂停函数的执行，等待一个Promise对象的状态由pending变为resolved（或rejected），然后继续执行后面的代码。

Async函数的语法如下：

async function functionName() {
  // 异步操作
  await promise;
  // 后续操作
}

下面是一个简单的示例代码：

async function fetchData() {
  console.log('Fetching data...');
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('Data fetched!');
}

fetchData();
console.log('Some other code');

// 输出：
// Fetching data...
// Some other code
// Data fetched!

js await

在上面的代码中，fetchData函数是一个Async函数，它使用了await关键字来等待一个2秒钟的Promise对象。当遇到await关键字时，函数会暂停执行，然后等待Promise对象的状态发生变化。在这个例子中，fetchData函数首先打印出Fetching data...，然后暂停执行，在2秒钟后，Promise对象的状态变为resolved，函数恢复执行，并打印出Data fetched!。在函数执行期间，后面的代码console.log('Some other code')依然可以继续执行。

js await错误处理

在Async函数中，我们可以通过使用try/catch块来处理Promise对象的reject状态。如果一个Promise对象在await操作时变为rejected，那么它会抛出一个错误，这个错误可以通过catch块来捕获。

下面是一个示例代码：

async function fetchData() {
  try {
    console.log('Fetching data...');
    await new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 2000));
    console.log('Data fetched!');
  } catch (error) {
    console.error(error);
  }
}

fetchData();
console.log('Some other code');

// 输出：
// Fetching data...
// Some other code
// Error occurred

在上面的例子中，我们故意将Promise对象的状态变为rejected，这个错误会被catch块捕获，然后打印出Error occurred。

js await

多个异步操作

Async/Await语法非常适合处理多个异步操作的情况。在Async函数中，我们可以按照顺序使用多个await关键字来等待不同的Promise对象。

下面是一个示例代码：

async function fetchMultipleData() {
  console.log('Fetching data 1...');
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('Data 1 fetched!');

  console.log('Fetching data 2...');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Data 2 fetched!');

  console.log('Fetching data 3...');
  await new Promise(resolve => setTimeout(resolve, 1500));
  console.log('Data 3 fetched!');
}

fetchMultipleData();
console.log('Some other code');

// 输出：
// Fetching data 1...
// Some other code
// Data 1 fetched!
// Fetching data 2...
// Data 2 fetched!
// Fetching data 3...
// Data 3 fetched!

在上面的示例代码中，我们定义了一个名为fetchMultipleData的Async函数，它按照顺序使用了3个await关键字来等待3个不同的Promise对象。在函数执行期间，每个Promise对象都会依次执行，并打印对应的提示信息。

js await

可选参数

在使用Async函数时，我们可以给它传递可选参数。这些参数可以用来配置Async函数的行为，比如设置超时时间、请求头等。

下面是一个示例代码：

async function fetchData(url, options) {
  console.log('Fetching data...');
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log(`Data fetched from ${url}!`);

  console.log('Options:', options);
}

fetchData('https://example.com/api/path', { headers: { 'Content-Type': 'application/json' } });
console.log('Some other code');

// 输出：
// Fetching data...
// Some other code
// Data fetched from https://example.com/api/path!
// Options: { headers: { 'Content-Type': 'application/json' } }

在上述代码中，fetchData函数接受两个参数：url和options。这些参数可以在函数的代码中使用。在示例中，我们将url设置为https://example.com/api/path，options设置为{ headers: { 'Content-Type': 'application/json' } }。然后函数执行期间，对应的值会被打印出来。

js await

使用Async/Await处理Promise链

在JavaScript中，使用Promise对象可以构建一个异步操作的链式调用，这个过程被称为Promise链。在Async函数中，我们同样可以使用Async/Await语法来处理Promise链。

下面是一个示例代码：

async function fetchData() {
  console.log('Fetching data...');
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('Data fetched!');
  return 'Data';
}

async function processData(data) {
  console.log(`Processing ${data}...`);
  await new Promise(resolve => setTimeout(resolve, 1500));
  console.log('Data processed!');
  return 'Processed data';
}

async function displayData() {
  const data = await fetchData();
  const processedData = await processData(data);
  console.log('Final result:', processedData);
}

displayData();
console.log('Some other code');

// 输出：
// Fetching data...
// Some other code
// Data fetched!
// Processing Data...
// Data processed!
// Final result: Processed data

在上面的代码中，我们定义了三个Async函数：fetchData、processData和displayData。displayData函数依次调用fetchData和processData函数来处理数据，并将最终结果打印出来。

js await

js await总结

本文详细介绍了JavaScript中的Async/Await语法。我们了解了Async函数的语法，学会了如何使用await关键字来处理异步操作。我们还学习了如何处理错误、处理多个异步操作、使用可选参数以及处理Promise链。Async/Await语法提供了一种更直观、可读性更强的方式来处理异步代码，使得JavaScript开发变得更加简单、高效。