首页 JS教程正文

探秘JavaScript异步编程：驾驭async/await与Promises

JS教程 2024-10-23 923 0

在Web开发的广阔天地中，JavaScript异步编程犹如一门神秘的艺术。随着技术的不断演进，async/await和Promises成为了前端工程师们津津乐道的话题。本文将带你走进这个异步世界，领略其中的奥妙与创意。

异步编程的前世今生

在JavaScript的早期版本中，异步编程主要依赖于回调函数。然而，这种方式容易造成“回调地狱”，代码可读性和可维护性较差。为了解决这一问题，Promises应运而生，成为ES6中的一大亮点。而async/await则是在ES2017中正式加入，使得异步编程更加简洁、直观。

Promise：异步编程的曙光

Promise对象代表了一个异步操作的最终完成（或失败）及其结果值。它有以下三个状态：

待定（Pending）：初始状态，既不是成功，也不是失败状态。
已兑现（Fulfilled）：意味着操作成功完成。
已拒绝（Rejected）：意味着操作失败。

下面是一个简单的Promise示例：

let promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 条件 */) {
    resolve('成功的结果');
  } else {
    reject('失败的原因');
  }
});

promise.then(function(value) {
  console.log(value);
}).catch(function(error) {
  console.log(error);
});

Promise的出现，让我们告别了回调地狱，代码结构更加清晰。

async/await：异步编程的巅峰之作

async/await是建立在Promises之上的语法糖，它允许我们用同步的方式编写异步代码。关键字async用于声明一个异步函数，而await用于等待一个Promise的完成。

以下是一个使用async/await的示例：

async function asyncFunction() {
  try {
    let result = await promise;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

下面，让我们来深入探索这篇文章的创意部分。

创意实践：异步编程的艺术

1. 异步加载图片

我们常常需要异步加载图片，以下是一个使用async/await的创意实践：

async function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

async function displayImage(url) {
  try {
    const img = await loadImage(url);
    document.body.appendChild(img);
  } catch (error) {
    console.log('图片加载失败：', error);
  }
}

2. 并发请求与超时处理

在处理多个异步请求时，我们可能需要同时发送多个请求，并设置超时时间：

async function fetchData(urls, timeout) {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchPromises = urls.map(url =>
    fetch(url, { signal }).then(response => response.json())
  );

  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const results = await Promise.all(fetchPromises);
    clearTimeout(timeoutId);
    return results;
  } catch (error) {
    console.log('请求超时或失败：', error);
    return null;
  }
}