来学学JavaScript中的Promise吧！🚀

嘿，JavaScript 爱好者！👋 你们准备好深入研究 Promise 了吗？🎉 我们将一步步地通过简单易懂的例子，少一点枯燥的理论，多一点实用的代码片段来讲解！✨💻

这里表示一段落的分隔或过渡

在JavaScript里，一个叫Promise的东西就像现实生活中的一个“承诺”，

• 待办 ："我会稍后再做。"
• 已完成 ："做到了！" 🎉
• 已拒绝 ："哎呀，出问题了。" 😢

此处省略

在 Promise 出现之前，我们通常使用 “回调”，这经常会导致一种叫做 “回调地狱”的情况。

    getData(function (data) {
      processData(data, function (result) {
        saveData(result, function (response) {
          console.log("全部搞定！");
        });
      });
    });

点击进入全屏 点击退出全屏

😵 这很难懂，对吧？

承诺救场了！🦸‍♂️ 它们把这堆乱七八糟的事情串成了一条线：

    getData()
      .then(processData)
      .then(saveData)
      .then(() => console.log("搞定！"))
      .catch((error) => console.error("出了问题：", error));

进入全屏 退出全屏

……

这就是你创建一个承诺的方法。

    const myPromise = new Promise((resolve, reject) => {
      const success = true; // 将其改为 false 可以看到拒绝的情况
      if (success) {
        resolve("耶！成功了！🎉");
      } else {
        reject("哎呀！出错了。😢");
      }
    });

进入全屏模式：退出全屏

使用 promise 对象：

    myPromise
      .then((message) => console.log(message))
      .catch((error) => console.error(error));

当myPromise解析成功时，会执行then方法打印message，如果解析失败，则会执行catch方法打印错误信息。

进入全屏 退出全屏

（或根据上下文选择合适的占位符，如“此处省略了具体内容”）

Promise 在 JavaScript 中随处可见！一个常见的就是 fetch。

让我们获取一些用户数据：

    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((response) => response.json()) # 将响应解析为 JSON
      .then((data) => console.log("打印用户数据:", data)) # 打印用户数据
      .catch((error) => console.error("获取数据时发生错误:", error)) # 处理错误

全屏 退出全屏

……

你可以连续使用 .then 来完成多个步骤，比如：functionA().then(functionB).then(functionC)。

    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((post) => {
        console.log("文章标题:", post.title);
        return fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
      })
      .then((response) => response.json())
      .then((user) => console.log("作者是:", user.name))
      .catch((error) => console.error("出错了，错误是:", error));

全屏模式 退出全屏

.catch 块用来处理链中出现的任何错误：

    fetch("https://jagroopurl.com") // 嘿，这个网址是假的哦
      .then((response) => response.json())
      .catch((error) => console.error("哎呀，出错了：", error));

全屏 开启/关闭

提示：在每个链的结尾加上 .catch 以防止未捕获的错误。这样可以确保程序更加稳定哦。🚨

并行运行多个异步任务:

    const promise1 = fetch("https://jsonplaceholder.typicode.com/posts/1");
    const promise2 = fetch("https://jsonplaceholder.typicode.com/posts/2");

    Promise.all([promise1, promise2])
      .then((responses) => Promise.all(responses.map((r) => r.json())))
      .then((data) => console.log("两个帖子的内容:", data))
      .catch((error) => console.error("一个或多个请求失败:", error));

进入全屏，退出全屏

让我们用承诺来创建一个定时器函数：

    const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

    wait(2000).then(() => console.log("再等2秒... ⏰"));

全屏模式 全屏退出

这里有个难题给你思考。

const promise = new Promise((resolve, reject) => {
  console.log("1. 创建了 Promise");
  resolve("2. Promise 已解决");
});

promise.then((msg) => console.log(msg));

console.log("3. 同步打印");

全屏模式.退出全屏.

会输出什么呢？🤔

这样做让 Promises 不那么吓人了吗？ 😄 试试这些例子，修改它们，并在下面的评论区分享你在棘手问题上的答案？👇

祝你快乐编程！🚀