⚡ES6 Promise：让 JS 异步编程不再头疼⚡

在JavaScript的世界里，异步编程一直是开发者们既爱又恨的话题。爱的是它能够解决单线程中的耗时操作，避免阻塞主线程，提升用户体验；恨的是它的复杂性和难以控制的执行流程。ES6引入的Promise对象，就是为了解决这些问题而生的。它为异步编程提供了一种更加优雅和可控的解决方案。

Promise的诞生

JavaScript是一种同步和异步相结合的语言。在ES6之前，异步操作通常通过回调函数来实现。然而，回调函数存在着诸多问题，比如"回调地狱"、错误处理困难等。Promise的出现，就是为了解决这些问题

OK，话不多说，带来今天的讲解

一、异步困境与 Promise 的降临

许多大型编程语言，遵循传统的同步编程模式，代码一行接着一行按部就班地执行，逻辑清晰直白。但 JavaScript 不同，由于它主要运行在浏览器环境，需要应对诸如页面渲染、用户交互、网络请求等大量耗时任务。如果采用同步方式处理这些耗时操作，页面就会陷入长时间的"假死"状态，用户体验极差。例如，当发起一个网络请求去获取远端服务器的数据时，要是后续代码必须等待请求完成才能继续执行，那么在这期间浏览器将无法响应其他用户操作，这显然是不可接受的。

ES6 Promise 应运而生，它宛如一位训练有素的指挥官，专门针对异步耗时性问题发号施令，让原本混乱无序的异步执行流程变得井然有序，一切尽在掌控。

二、Promise 的构造

把 Promise 想象成一个神奇的魔法口袋，专门用来收纳那些耗时的异步任务。当我们创建一个 Promise 实例时，就像是给这个口袋下达了一个特殊使命。

javascript 复制代码

const p = new Promise((resolve, reject) => { // executor 执行器
    console.log('3333'); // 同步任务，会立即执行
    setTimeout(() => {  // 异步任务 event loop
        console.log('222');
        resolve('BMW325');
        reject(); // 正常情况不应同时调用，这里仅作演示
    }, 1000);
});

这里的 (resolve, reject) => {...} 就是所谓的 executor，它会在 Promise 实例化的瞬间被触发执行。其中，resolve 和 reject 是两个至关重要的函数参数，它们掌控着 Promise 的命运走向。

then方法

当Promise的状态变为fulfilled时，会执行then方法中的回调函数。这个回调函数接受一个参数，即resolve传递的值。

javascript 复制代码

p.then((value) => {
  console.log('Promise resolved:', value);
});

catch方法

当Promise的状态变为rejected时，会执行catch方法中的回调函数。这个回调函数接受一个参数，即reject传递的错误信息。

javascript 复制代码

p.catch((error) => {
  console.log('Promise rejected:', error);
});

三、Promise 的状态流转与回调响应

Promise 有着三种清晰明确的状态：pending（等待）、fulfilled（成功）和 rejected（失败）。

刚实例化时，Promise 处于 pending 状态，就像马拉松比赛刚鸣枪起跑，选手们蓄势待发，一切尚未有定论。在上述代码中，实例 p 一创建就进入了 pending 状态，同步输出 3333 后，进入 setTimeout 异步任务等待环节。

当异步任务顺利完成，resolve 函数被调用，此时 Promise 的状态就如同运动员冲过终点线，瞬间从 pending 切换到 fulfilled，后续通过 then 方法绑定的回调函数就会被激活执行。

javascript 复制代码

p.then(() => {
    console.log('111');
    console.log(p);
});

一旦异步任务遭遇阻碍，出现错误，reject 函数被调用，Promise 状态则变为 rejected，与之关联的 catch 方法中的回调函数便会挺身而出，处理错误信息。

javascript 复制代码

p.catch(() => {
    console.log('error');
});

这种状态一旦确定就不可更改的特性，使得异步流程如同在坚固轨道上行驶的列车，不会偏离既定方向，大大增强了代码的可预测性。

四、Promise 的特点：网络请求

在前端开发中，频繁地与后端服务器交互获取数据是家常便饭，而网络请求恰恰是典型的异步操作。

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="members"></ul>
    <script>
        console.log(fetch('https://api.github.com/orgs/lemoncode/members'));
        //.then(res => res.json()) 
        //.then(data => { 
        //     console.log(data)
        //     document.getElementById('members').innerHTML = data.map(member => `
        //     <li>
        //         <a href="${member.html_url}">${member.login}</a>
        //     </li>
        //     `)
        // });
    </script>
</body>
</html>

这段代码使用 fetch API 向 GitHub 发送请求获取组织成员信息，fetch 返回的正是一个 Promise 对象。虽然示例中后续处理数据并渲染到页面的代码被注释掉了，但正常流程下，我们可以通过链式调用 then 方法，先将返回的响应解析为 JSON 格式，再进一步提取数据，动态生成列表展示成员信息。每一个 then 就像是流水线上的一道工序，有序地对异步获取的数据进行加工处理，充分展现了 Promise 在复杂异步流程中的强大协调能力。

五、总结

总之，ES6 Promise 彻底革新了 JavaScript 的异步编程格局，它不仅解决了单线程模型下异步操作的管理难题，还为开发者提供了简洁、优雅且可靠的异步处理机制。无论是构建小型项目还是大型复杂应用，掌握 Promise 都如同手握一把开启高效开发之门的金钥匙，助力我们在 JavaScript 的世界里畅行无阻，创造出更加出色的用户体验。

如果以上知识对你起到帮助，就请给作者点个赞吧