JavaScript 异步编程指南

tech JavaScript 异步编程

Table of Contents

这是一些关于 JavaScript 异步编程的基本示例，可以帮助你更好地理解和使用异步编程。

回调函数 Link to 回调函数

回调函数是最基本的异步编程方式。你可以将一个函数作为参数传递给另一个函数，并在适当的时候调用它。

示例 Link to 示例

JAVASCRIPT

function fetchData(callback) {
  setTimeout(() => {
    callback("数据加载完成");
  }, 1000);
}

fetchData((message) => {
  console.log(message);
});

输出 Link to 输出

PLAINTEXT

数据加载完成

Promise Link to Promise

Promise 是一种更现代的异步编程方式，它可以更好地处理异步操作的结果。

示例 Link to 示例

JAVASCRIPT

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据加载完成");
    }, 1000);
  });
}

fetchData().then((message) => {
  console.log(message);
});

输出 Link to 输出

PLAINTEXT

数据加载完成

async/await Link to async/await

async/await 是基于 Promise 的语法糖，使得异步代码看起来更像同步代码。

示例 Link to 示例

JAVASCRIPT

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据加载完成");
    }, 1000);
  });
}

async function main() {
  const message = await fetchData();
  console.log(message);
}

main();

输出 Link to 输出

PLAINTEXT

数据加载完成

错误处理 Link to 错误处理

在异步编程中，错误处理是非常重要的。你可以使用 .catch 方法或 try/catch 语句来处理错误。

示例 Link to 示例

JAVASCRIPT

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("数据加载失败");
    }, 1000);
  });
}

// 使用 .catch 方法
fetchData()
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error);
  });

// 使用 try/catch 语句
async function main() {
  try {
    const message = await fetchData();
    console.log(message);
  } catch (error) {
    console.error(error);
  }
}

main();

输出 Link to 输出

PLAINTEXT

1
2

数据加载失败
数据加载失败

感谢阅读！

JavaScript 异步编程指南

Mon Jul 01 2024 Pin

591 字 · 5 分钟

tech JavaScript 异步编程