深入异步JavaScript：掌握Promises与async/await

最新推荐文章于 2024-09-11 21:02:15 发布

卓卓没头发

最新推荐文章于 2024-09-11 21:02:15 发布

阅读量1.4k

点赞数 25

分类专栏： JavaScript心得文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/a3098448071/article/details/140478338

版权

JavaScript心得专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言

异步编程允许JavaScript代码在等待某些耗时操作（如网络请求、文件读写等）完成时，继续执行其他任务，而不是阻塞整个程序的运行。这种编程模式极大地提高了应用的响应速度和效率。

JavaScript中的异步编程基础

同步与异步代码的区别

在JavaScript中，代码的执行可以分为同步和异步两种模式。同步代码的执行是顺序的，即代码会按照书写的顺序一条一条地执行，直到当前任务完成才会执行下一个任务。这种模式简单直观，但当遇到耗时操作时，如网络请求或文件读写，同步代码会导致程序阻塞，用户界面无法响应，从而影响用户体验。

异步代码则允许程序在等待某些操作完成的同时，继续执行其他任务。这意味着即使某个操作需要较长时间才能完成，程序也不会被阻塞，用户界面仍然可以响应用户的操作。异步编程是现代Web开发中处理耗时操作的首选方式。

回调函数（Callbacks）

回调函数是JavaScript中实现异步编程的一种基本方式。它是一个作为参数传递给另一个函数的函数，当异步操作完成时，这个回调函数会被调用。回调函数是处理异步操作结果的一种简单有效的方法。

例如，使用setTimeout函数时，我们可以传递一个回调函数作为第二个参数，该函数将在指定的时间后执行：

setTimeout(function() {
  console.log('This message is shown after 2 seconds.');
}, 2000);

事件监听（Event Listeners）

事件监听是另一种处理异步事件的方式。在JavaScript中，许多对象（如DOM元素、XMLHttpRequest等）会触发事件，我们可以通过添加事件监听器来响应这些事件。

例如，当用户点击一个按钮时，我们可以为该按钮添加一个点击事件监听器：

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button was clicked!');
});

事件监听器允许我们定义当特定事件发生时应该执行的操作，这在处理用户交互和响应异步事件时非常有用。

总结来说，同步与异步代码的区别在于它们处理任务的方式。同步代码按顺序执行，可能导致程序阻塞；而异步代码允许程序在等待操作完成的同时继续执行其他任务，提高了程序的效率和用户体验。

Promises

Promises是JavaScript中用于处理异步操作的一种机制，它提供了一种更加清晰和可读的方式来处理异步代码。Promise对象代表了一个可能在未来某个时刻完成的异步操作的结果。

Promises的基本概念

Promise对象有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。一旦Promise的状态改变，它就会固定下来，不会再变。Promise的目的是为了将异步操作的处理和结果的获取分离，使得代码更加清晰和易于管理。

创建和使用Promises

创建一个新的Promise对象非常简单，你可以使用new Promise()构造函数来创建。构造函数接受一个执行器函数作为参数，该函数有两个参数：resolve和reject。resolve函数用于将Promise状态改为fulfilled，而reject函数用于将Promise状态改为rejected。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve('Operation successful');
  } else {
    reject('Operation failed');
  }
});

Promise链式调用

Promise链式调用是通过.then()方法实现的，它允许你在Promise成功解决后执行一系列操作。如果.then()方法返回一个新的Promise，那么下一个.then()将会等待这个新的Promise解决后再执行。

myPromise
  .then(result => {
    console.log(result); // 输出 'Operation successful'
    return 'Next operation successful';
  })
  .then(nextResult => {
    console.log(nextResult); // 输出 'Next operation successful'
  })
  .catch(error => {
    console.log(error); // 输出 'Operation failed'
  });

Promise的常见错误处理

错误处理在Promise中是通过.catch()方法实现的。.catch()方法用于捕获Promise链中前面的任何错误，并允许你处理这些错误。如果在Promise链中没有.catch()来处理错误，那么错误会冒泡到全局的unhandledrejection事件。

myPromise
  .then(result => {
    // 处理成功的情况
  })
  .catch(error => {
    // 处理错误的情况
    console.log(error);
  });

通过使用Promises，你可以以一种更加结构化和可读的方式编写异步代码，同时有效地处理异步操作的成功和失败情况。

例子

光说很抽象，我们来个例子生动一下

// 创建一个新的Promise对象
const fetchData = new Promise((resolve, reject) => {
  // 模拟异步操作，比如网络请求
  setTimeout(() => {
    // 假设我们随机决定请求成功还是失败
    const success = Math.random() > 0.5;

    if (success) {
      // 如果请求成功，调用resolve()并传递数据
      resolve('Data fetched successfully!');
    } else {
      // 如果请求失败，调用reject()并传递错误信息
      reject('Failed to fetch data.');
    }
  }, 1000); // 假设请求需要1秒钟
});

// 使用.then()和.catch()来处理Promise的结果
fetchData
  .then((message) => {
    console.log(message); // 输出成功信息
  })
  .catch((error) => {
    console.error(error); // 输出错误信息
  });

在这个例子中，我们创建了一个名为fetchData的Promise对象，它在1秒后随机决定是成功还是失败。如果成功，它会调用resolve()并传递一条成功消息；如果失败，它会调用reject()并传递一条错误消息。然后我们使用.then()来处理成功的情况，并使用.catch()来处理失败的情况。

这个例子展示了Promise的基本用法，包括创建Promise、处理成功和失败的结果，以及链式调用.then()和.catch()来组织异步代码。

async/await

async/await是基于Promises的语法糖，它使得异步代码的书写和理解更加接近于同步代码的风格。这使得异步代码更加简洁和易于维护。

async/await的基本语法

async关键字用于声明一个异步函数，而await关键字用于等待一个Promise对象的结果。一个函数如果被async关键字修饰，那么这个函数会自动返回一个Promise。

async function fetchData() {
  // 这里可以使用await等待Promise解决
  const result = await someAsyncFunction();
  // 继续执行其他代码
  return result;
}

如何使用async/await简化异步代码

使用async/await可以让我们以同步的方式编写异步代码，这使得代码更加直观和易于理解。

async function fetchData() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

在上面的例子中，我们使用try...catch结构来处理异步操作可能出现的错误，这与同步代码中的错误处理方式相同。

async/await与Promises的关系

async/await是建立在Promises之上的。在async函数中，await关键字后面通常跟一个Promise对象。如果await后面的Promise被解决，那么async函数会继续执行；如果Promise被拒绝，那么async函数会抛出一个错误。

错误处理和try/catch

在async函数中，你可以使用try...catch结构来捕获和处理错误。如果await后面的Promise被拒绝，那么错误会被catch块捕获。

async function fetchData() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

使用async/await和try/catch，你可以以一种非常直观和同步的方式处理异步操作，同时保持代码的清晰和易于维护。

异步模式

在JavaScript中，异步编程模式允许我们处理耗时操作，如网络请求、文件读写等，而不会阻塞主线程。这使得我们可以构建响应迅速、用户体验良好的应用程序。然而，随着异步操作的增加，代码可能会变得复杂和难以管理，这就是所谓的“异步地狱”。

回调地狱（Callback Hell）及其解决方案

回调地狱是指在使用回调函数处理多个异步操作时，代码嵌套过深，导致代码难以阅读和维护的情况。这种模式通常被称为“回调地狱”。

doAsyncOperation1(function(error, result1) {
  if (error) {
    // 处理错误
  } else {
    doAsyncOperation2(result1, function(error, result2) {
      if (error) {
        // 处理错误
      } else {
        doAsyncOperation3(result2, function(error, result3) {
          if (error) {
            // 处理错误
          } else {
            // 使用result3
          }
        });
      }
    });
  }
});

解决方案包括使用Promises、async/await以及模块化代码。

Promise地狱（Promise Hell）及其解决方案

Promise地狱是指在使用Promise处理多个异步操作时，代码变得复杂和难以管理的情况。这通常发生在需要链式调用多个Promise时。

doAsyncOperation1()
  .then(result1 => {
    return doAsyncOperation2(result1);
  })
  .then(result2 => {
    return doAsyncOperation3(result2);
  })
  .then(result3 => {
    // 使用result3
  })
  .catch(error => {
    // 处理错误
  });

解决方案包括使用async/await来简化代码结构，以及合理组织代码以避免过度嵌套。

并行和串行执行异步任务

并行执行异步任务意味着同时启动多个异步操作，而不需要等待前一个操作完成。串行执行则是按顺序一个接一个地执行异步操作。

// 并行执行
Promise.all([doAsyncOperation1(), doAsyncOperation2(), doAsyncOperation3()])
  .then(([result1, result2, result3]) => {
    // 使用result1, result2, result3
  });

// 串行执行
doAsyncOperation1()
  .then(result1 => {
    return doAsyncOperation2(result1);
  })
  .then(result2 => {
    return doAsyncOperation3(result2);
  })
  .then(result3 => {
    // 使用result3
  });

异步迭代器和for...of循环

异步迭代器允许我们使用for...of循环来迭代异步操作的结果。

async function processAsyncIterator(asyncIterator) {
  for await (const value of asyncIterator) {
    console.log(value);
  }
}

通过使用异步迭代器和for...of循环，我们可以以一种更加直观和同步的方式处理异步数据流。

async/await的高级用法和技巧

1.并行执行多个异步操作：

使用Promise.all可以同时执行多个异步操作，并在所有操作完成时获取结果。

async function fetchMultiple() {
  const [data1, data2, data3] = await Promise.all([
    fetch('url1'),
    fetch('url2'),
    fetch('url3')
  ]);
  // 处理data1, data2, data3
}

2.条件性等待：

可以使用if语句来决定是否等待某个异步操作。

async function conditionalAwait() {
  const condition = true; // 或者 false
  if (condition) {
    const result = await someAsyncFunction();
    // 使用result
  } else {
    // 不等待
  }
}

3.循环中的异步操作：

在循环中使用await时，确保每次迭代都等待异步操作完成。

async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
}

4.错误处理：

使用try...catch结构来捕获和处理异步操作中的错误。

async function fetchData() {
  try {
    const data = await fetch('url');
    // 处理data
  } catch (error) {
    // 处理错误
  }
}

5.递归异步操作：

在递归函数中使用await来等待异步操作完成。

async function recursiveAwait() {
  const result = await someAsyncFunction();
  if (result.someCondition) {
    await recursiveAwait();
  }
}

6.使用`finally`清理资源：

finally块无论成功还是失败都会执行，常用于清理资源。

async function fetchData() {
  try {
    const data = await fetch('url');
    // 处理data
  } catch (error) {
    // 处理错误
  } finally {
    // 清理资源，如关闭数据库连接
  }
}

7.使用`async`函数作为Promise的执行器：

async函数本身返回一个Promise，可以作为其他异步操作的执行器。

async function executeAsyncOperation() {
  const result = await someAsyncFunction();
  // 使用result
}

8.使用`Promise.race`处理超时：

Promise.race可以用来处理异步操作的超时情况。

async function fetchWithTimeout(url, timeout) {
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), timeout)
  );
  const response = await Promise.race([fetch(url), timeoutPromise]);
  // 处理response
}

通过掌握这些高级技巧，你可以更有效地使用async/await来编写清晰、高效且易于维护的异步代码。