用JavaScript Promise让异步编程变得易如反掌

2024-02-22 10:27:30

JavaScript基础——Promise使用指南

在上一篇文章《JavaScript基础——回调(callback)是什么》中，我们一起学习了回调，明白了回调就是一个在另外一个函数执行完后要执行的函数。如果我们希望异步函数能够像同步函数那样顺序执行，只能嵌套使用回调函数，过多的回调嵌套会使得代码变得难以理解与维护。为了避免“回调地狱”，JavaScript引入了Promise，它是一种异步编程的方式，可以帮助我们轻松处理异步操作，让我们的代码更加清晰、易读。

Promise的基础用法

Promise是一个对象，它表示一个异步操作的结果，有三种状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。

创建Promise：

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

resolve和reject是Promise的两个方法，用于改变Promise的状态。当异步操作成功完成时，调用resolve方法，将结果作为参数传入；当异步操作失败时，调用reject方法，将错误原因作为参数传入。

Promise的then方法

then方法用于添加一个回调函数，当Promise的状态改变时，该回调函数就会被调用。then方法可以链式调用，即一个Promise的then方法可以返回另一个Promise，这样就可以将多个异步操作串联起来。

promise.then((result) => {
  // 处理成功的结果
}).then((result) => {
  // 处理下一个成功的结果
}).catch((error) => {
  // 处理错误
});

Promise的catch方法

catch方法用于添加一个回调函数，当Promise的状态变为rejected时，该回调函数就会被调用。catch方法只能在then方法之后使用，并且只能调用一次。

promise.then((result) => {
  // 处理成功的结果
}).catch((error) => {
  // 处理错误
});

Promise的finally方法

finally方法用于添加一个回调函数，无论Promise的状态是fulfilled还是rejected，该回调函数都会被调用。finally方法只能在then方法或catch方法之后使用，并且只能调用一次。

promise.then((result) => {
  // 处理成功的结果
}).catch((error) => {
  // 处理错误
}).finally(() => {
  // 无论成功还是失败，都会执行的代码
});

Promise的常见用法

Promise可以用于处理各种异步操作，比如AJAX请求、文件读取、定时器等。以下是一些Promise的常见用法：

AJAX请求：

fetch('https://example.com/api/data')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // 处理获取到的数据
  })
  .catch((error) => {
    // 处理错误
  });

文件读取：

const fs = require('fs');

fs.readFile('file.txt', 'utf-8')
  .then((data) => {
    // 处理读取到的文件内容
  })
  .catch((error) => {
    // 处理错误
  });

定时器：

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

delay(1000).then(() => {
  // 1秒后执行的代码
});