Promise 入门指南：揭秘异步编程的利器

前端

2023-07-09 02:16:25

Promise：让异步编程成为易事

在JavaScript的世界中，异步编程就像家常便饭。想象一下，你正在排队等候咖啡，而你的订单正在后台处理。你无法立即得到咖啡，但你也不会傻傻地站在那里干等，对吧？这就是异步编程的本质——在等待结果的同时，继续做其他事情。

传统上，我们使用回调函数来处理异步操作。当操作完成后，回调函数就会被调用，提供结果或错误信息。然而，回调函数就像俄罗斯套娃，一个嵌套着另一个，很容易陷入混乱的"回调地狱"。

Promise的登场

Promise应运而生，为异步编程带来了曙光。它是一种对象，代表着异步操作的结果，有三种状态：

未决 (pending)： 操作尚未完成。
已完成 (fulfilled)： 操作成功完成。
已拒绝 (rejected)： 操作失败。

Promise提供了更简洁、更强大的方式来处理异步操作：

then()： 当操作完成后执行的回调函数。
catch()： 当操作失败时执行的回调函数。

链式调用的力量

Promise的链式调用能力堪称一绝。你可以将多个异步操作连接起来，形成一个异步任务队列。当一个操作完成后，下一个操作会自动启动，无需编写嵌套回调函数。这种方式极大地提高了代码的可读性和可维护性，让你远离回调地狱的噩梦。

在微任务中的应用

Promise不仅仅适用于宏任务（如setTimeout()），还适用于微任务（在当前脚本执行完成后立即执行的任务）。这使得Promise成为处理浏览器事件和Node.js事件循环的理想工具。

例如，在浏览器中，你可以使用Promise来处理按钮点击事件：

document.getElementById('btn').addEventListener('click', () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => { resolve('Hello, world!'); }, 1000);
  });

  promise.then(data => { console.log(data); });
});

这段代码创建一个Promise，表示按钮点击事件。当按钮被点击时，Promise的状态变为已完成，并执行then()回调函数，输出"Hello, world!"。

在Node.js中，你可以使用Promise来处理文件读取事件：

const fs = require('fs');

const promise = new Promise((resolve, reject) => {
  fs.readFile('file.txt', 'utf8', (err, data) => {
    if (err) { reject(err); } else { resolve(data); }
  });
});

promise.then(data => { console.log(data); }).catch(err => { console.log(err); });