实用异步 JavaScript

介绍

让我们花点时间一起复习一下一些 JavaScript 异步概念。

什么是异步？

首先，我们来回顾一下什么是异步进程。简单来说，异步进程并非立即执行，而是存在延迟或滞后。这就像在一家人很多的咖啡馆点咖啡——你下了单，需要等待一段时间才能拿到杯子。

创建虚假 API 调用

好吧，我们可以创建一个模拟基本 API 调用的函数吗？
当然可以！这里有一个简单的例子：

function fakeApiCall(response) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Success: ${response}`);
    }, 1000);
  });
}

我们的 fakeApiCall 函数接受一个值，并在 1 秒延迟后返回，并标记为“成功”。我们使用 Promise 是因为它始终处理异步代码，并使用 setTimeout 来管理延迟。

添加错误处理

但是，API 调用总是会返回预期值吗？不，有时它们会返回错误。让我们也添加这个功能：

function fakeApiCall(response) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve(`Success: ${response}`);
      } else {
        reject('API call failed: try again');
      }
    }, 1000);
  });
}

这里，我们使用 Math.random() 添加了一个条件。现在，成功的概率为 50%，失败的概率也为 50%，模拟了真实世界中 API 的行为。

失败时重试

太棒了！但是，如果我们想在 API 调用失败时重试，该怎么办呢？让我们来解决这个问题：

let attempt = 0;
async function makeApiCallWithRetries(value) {
  try {
    const result = await fakeApiCall(value);
    return result;
  } catch (error) {
    attempt++;
    console.log(`Attempt ${attempt} failed: ${error} - for value: ${value}`);
    return makeApiCallWithRetries(value);
  }
}

在这段代码中，我们会不断重试，直到收到成功响应。
注意，如果运气不好，这可能会导致无限循环，但我们希望一切顺利！

设置重试限制

为了避免无限循环，让我们设置最大重试限制：

let attempt = 0;
const maxRetries = 5;

async function makeApiCallWithRetries(value) {
  try {
    const result = await fakeApiCall(value);
    return result;
  } catch (error) {
    attempt++;
    if (attempt >= maxRetries) {
      throw new Error(`Max retries reached: ${error}`);
    }
    console.log(`Attempt ${attempt} failed: ${error} - for value: ${value}`);
    return makeApiCallWithRetries(value);
  }
}

现在，我们将在尝试五次后停止尝试，避免可怕的无限循环。

进行并行 API 调用

那么，如果我们需要同时进行多个 API 调用怎么办？
让我们仔细想想。假设我们有一堆请求需要一次性发出。该如何高效地处理呢？
我们可以并行运行它们。方法如下：

async function makeApiCallsInParallel(values) {
  const promises = values.map((value) => makeApiCallWithRetries(value));

  const results = await Promise.allSettled(promises);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Response ${index + 1} succeeded: ${result.value}`);
    } else {
      console.log(`Response ${index + 1} failed: ${result.reason}`);
    }
  });
}

此函数接受一个值数组，并为每个值并行调用 makeApiCallWithRetries 。我们使用 Promise.allSettled 来处理成功和失败的调用。

结论

我希望这能刷新您对核心 JavaScript 异步功能的记忆，甚至教会您一些新东西。

感谢关注！点击订阅获取更多！👋

鏂囩珷鏉ユ簮锛�https://dev.to/bgdnvarlamov/practical-async-javascript-ep5