难以理解 Promise 的工作原理

Question

我有一段代码，可以从本地磁盘获取 JSON 文件：

var modelData = fetch("./modelData.json")
       .then((res) => res.json())
       .then((val) => console.log(val)

这样做我可以在浏览器控制台中完美地看到 JSON 数据。但是，当我这样做时：

    var modelData = fetch("./modelData.json")
           .then((res) => res.json())
           .then((val) => val)
console.log(modelData)

我在控制台中看到一个 promise(pending) 。我知道异步 JS 是如何工作的，并且我知道链式 then() 仅在前一个承诺得到解决时才会触发。我的问题是，在我的第二个 then() 块中，为什么当我 console.log() 时可以看到数据，但当我从 console.logging 的同一函数返回它时看不到日期？

另外，如果我考虑到这样一个事实，即在第二种情况下，当我 console.logged 时，由于 fetch() 的异步性质，承诺没有得到履行，我尝试了以下操作：

var modelData = fetch("./modelData.json")
           .then((res) => res.json())
           .then((val) => val)
setTimeout(()=>console.log(modelData), 1000)

认为一旦承诺得到履行，我肯定会得到我的价值。但后来我明白了

承诺（兑现）

。谁能告诉我我错过了什么？我将非常感谢任何帮助。

Answer 1

一开始理解这个概念很困难。我将稍微更改您的代码：

var promise = fetch("./modelData.json");
promise.then((res) => res.json())
    .then((val) => console.log(val);
console.log(modelData)

如您所见，是相同的代码。我做出承诺并设定决心后要做的事情。您得到的是一个对象（承诺），它将运行您的提取，并在成功时调用您的“then”函数。

但变量“promise”（问题中的 modelData）始终是一个承诺。从来没有关于您的模型的数据。

想象一下，您调用某个延迟 60 秒的 setTimeout 函数，而不是 fetch。你的 console.log 将立即执行，在那一刻你不可能得到你的函数的结果，除了对象是一个承诺，而不是你获取的数据。
但是调试代码，想象一下你输入了promise代码，60秒后，你进入了“then”函数。在该函数内部，您可以获取数据。为此，您可以在 then 函数内部处理结果，而不是在外部。

Answer 2

你无法“拆开” Promise，但你甚至不必这样做。

Promise 并不是真实数据的占位符，一旦数据到达就会神奇地变成它。它是一个句柄，通过它您可以以相同的方式访问数据，无论数据是已经到达还是稍后到达。

因此，从 then 回调返回的任何内容都将始终包装在另一个 Promise 中，因此仍然无法从外部直接访问它。

如果我们有以下代码，

//`Promise.resolve` is added just for the sake of illustration (it wraps its argument in a promise similarly to what `then` does)
const p1 = Promise.resolve(fetch("./modelData.json"))
const p2 = p1.then((res) => res.json())
const p3 = p2.then((val) => val)

...我们可以像这样可视化结构：

        Promise.resolve(  fetch(...)  )
        vvvvvvvvvvvvvvv   vvvvvvvvvv
 +------+++++++++++++++   ++++++++++
 |                         |
 v                        vvv
p1 ---------------- .then(res => res.json())
                     vvvv        vvvvvvvvvv
 +-------------------++++        ++++++++++
 |                         +-----+
 |                         |
 v                        vvv
p2 ---------------- .then(val => val)
                     vvvv        vvv
 +-------------------++++        +++
 |                         +------+
 |                         |
 v                         v
p3  • • • • • • • • .then(... => ...)

正如您所看到的，需要另一个 .then 来访问 p3。

这就是为什么console.log在内部then可以打印真实值，而console.log在外部只会给你一个承诺。

Answer 3

fetch() 函数和 then() 方法都返回一个 Promise 对象。您将该 Promise 对象分配给 modelData，它将保留为 Promise 对象，并且不会自动重新分配给已实现的值。

要获取已完成的值，您可以使用 then() 方法或 await 关键字。

// name it `modelPromise` to be clear
const modelPromise = fetch("./modelData.json")
           .then(res => res.json())
           .then(val => val)

modelPromise.then(val => console.log(val))

// `await` can only be used inside an async function
async function main() {
  const value = await modelPromise;
  console.log(value);
}

Answer 4

你可以这样做

    var modelData = fetch("./modelData.json")
           .then((res) => res.json())
           .then((val) => {
               console.log(val)      
            })

Promise(fulfilled) 的原因是因为 javascript 运行同步而不是异步，所以你需要像上面一样链接 .then 或在异步块中运行它。

const printmodeldata = async () => {
     const data = await modelData;
     console.log(data);
}

printmodeldata();

Answer 5

如果您确实想要执行基于 setTimeout() 的方法，那么以下方法可能会起作用（这完全取决于承诺需要多长时间才能实现）。

var modelData;
fetch("https://jsonplaceholder.typicode.com/users/3")
       .then((res) => res.json())
       .then((val) => modelData=val);

setTimeout(()=>console.log(modelData),100);

但最终这并不比简单地将 console.log() 放入最终的.then() 中更容易。通过这种方法，您可以确保在履行承诺后立即得到结果。而且，作为奖励，收到的结果将可用于全局变量 modelData 中进一步的事件驱动交互。

var modelData;
fetch("https://jsonplaceholder.typicode.com/users/3")
       .then((res) => res.json())
       .then((val) =>{
  modelData=val;
  console.log(modelData);
});