JavaScript之异步编程详解（一）

最新推荐文章于 2024-12-31 14:16:22 发布

吾二胖

最新推荐文章于 2024-12-31 14:16:22 发布

阅读量2.3k

点赞数 41

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Jarvan_I/article/details/137855374

版权

文章的更新路线：JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题（HTML基础知识和CSS基础知识已经更新完毕）

正文

1. 回调函数

回调函数是最基本的异步编程方式。通过将一个函数作为参数传递给另一个函数，在异步任务完成后调用该函数来处理结果。


function fetchData(callback) {
  // 模拟异步操作

  setTimeout(() => {
    const data = '这是异步获取的数据';
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log('处理数据:', data);
}

fetchData(handleData);

在上述示例中，fetchData函数模拟了一个异步操作，1秒后返回数据。我们通过将handleData函数作为回调函数传递给fetchData函数，在异步操作完成后调用handleData函数来处理数据。

优点：

简单易懂，容易理解和使用。
可以处理任意数量的异步操作。

缺点：

容易造成回调地狱，即多层嵌套的回调函数，难以维护和扩展。
不方便处理错误，需要手动传递错误信息。

2. Promise

Promise是ES6引入的一种更为优雅的异步编程方式。它可以链式调用，避免了回调地狱的问题。


function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作

    setTimeout(() => {
      const data = '这是异步获取的数据';
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log('处理数据:', data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

在上述示例中，fetchData函数返回一个Promise对象。在异步操作完成后，调用resolve方法将结果传递给then方法中的回调函数进行处理。如果发生错误，可以调用reject方法，并通过catch方法捕获错误。

优点：

可以链式调用，避免了回调地狱。
更好地处理错误，通过 catch方法捕获错误。

缺点：

无法取消Promise，一旦创建就会执行，无法中途停止。
如果不使用 catch方法捕获错误，可能会导致未处理的异常。

3. async/await

async/await是ES8引入的一种基于Promise的异步编程方式，它使用起来更加简洁明了。


function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作

    setTimeout(() => {
      const data = '这是异步获取的数据';
      resolve(data);
    }, 1000);
  });
}

async function handleData() {
  try {
    const data = await fetchData();
    console.log('处理数据:', data);
  } catch (error) {
    console.error('发生错误:', error);
  }
}

handleData();

在上述示例中，fetchData函数返回一个Promise对象。我们可以在handleData函数前面加上async关键字，然后使用await关键字等待Promise对象的解析结果。在try块中处理正常情况下的结果，在catch块中处理错误情况。

优点：

代码更加简洁明了，类似于同步代码的写法。
可以使用 try...catch语法捕获错误。

缺点：

无法取消异步操作，一旦开始就无法中途停止。
await只能在 async函数中使用。

4. Generator

Generator是ES6引入的一种特殊函数，可以通过yield关键字实现暂停和恢复执行的功能，从而实现异步编程。


function* fetchData() {
  // 模拟异步操作

  setTimeout(() => {
    const data = '这是异步获取的数据';
    iterator.next(data);
  }, 1000);
}

const iterator = fetchData();
const result = iterator.next();

result.value.then(data => {
  console.log('处理数据:', data);
})
.catch(error => {
  console.error('发生错误:', error);
});