promise.then 机制如何工作？

Question

观看视频并阅读 [Promise.then][1] 后，我仍然不明白它是如何工作的。 所以我写了一个例子，并打印到控制台，但仍然使用 output 我无法理解它是如何工作的。 我希望我的问题足够清楚，如果没有，请告诉我，我会根据您的回答尝试详细说明。 这是我的代码：

   const getCountryData = function (country) {

   fetch(`https://restcountries.eu/rest/v2/name/${country}`)
     .then(response => {
       console.log('111111111111111');
       if (!response.ok)
         throw new Error(`Country not found (${response.status})`);
       return response.json();
       })
     .then(data => {
         console.log('22222222222');
        const neighbour = data[0].borders[0];
       if (!neighbour) return;
       return fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`);
     })
     .then(response => {
         console.log('333333333')
       if (!response.ok)
         throw new Error(`Country not found (${response.status})`);
       return response.json();
        })
     .then(data => console.log('44444444444'))
     .catch(err => {
       console.error(`${err} 💥💥💥`);
     })
     .finally(() => {
       console.log('finalyyyy')
     });
     
     console.log("after all async calls");
 };

我无法理解以下内容：

1. 如果我们看第一个then的例子，它得到一个回调作为参数，回调返回一个Promise object。 那么哪个 object 调用第二个呢？ 是从第一次调用时返回的，还是从回调中返回的？
2. 我知道回调“附加”到获取 function。 例如，当获取 function 将完成时，将执行回调。 但我不明白如何以及何时调用第二个、第三个和第四个。 第一个回调还包含一个异步 function ** response.json()**，那么如果他需要json.response从第一个什么时候开始，那么第二个什么时候开始？
3. 如果第一次或第二次发生异常，代码究竟是如何知道跳转到捕捉function 的？
   [1]： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 1

then函数不接收回调，它们接收上一个异步操作的结果。 所以fetch的结果被传递给第一个then ， response.json()的结果被传递给第二个then等等......

万一出现错误，链条会断裂，它会直接到达第一个catch function。

在幕后还有更多，考虑到then函数中的 fetch 和其他操作可以是异步的，所以在运行时发生的是 fetch function 的结果被推送到事件队列中，当事件循环采取你的下一个然后从队列中提取 function 并传递给 function。
本文解释了它是如何在内部工作的： https://www.digitalocean.com/community/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript

Answer 2

我将尝试使用async/await运算符以不同的方式解释这一点。

你的getCountryData function 的等价物如下

const getCountryData = async (country) => {
    console.log("after all async calls"); // explanation for the this line below
    try {
        let response1 = await fetch(`https://restcountries.eu/rest/v2/name/${country}`);

        // first then
        console.log('111111111111111');
        if (!response1.ok)
            throw new Error(`Country not found (${response1.status})`);
        let data1 = await response1.json();

        // second then
        console.log('22222222222');
        const neighbour = data1[0].borders[0];
        let response2;
        if (neighbour)
            response2 = await fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`);

        // third then
        console.log('333333333');
        if (!response2.ok)
            throw new Error(`Country not found (${response2.status})`);
        let data2 = await response2.json();

        // fourth then
        console.log('44444444444');
    } catch (err) {
        console.error(`${err} 💥💥💥`);
    } finally {
        console.log('finalyyyy');
    }
}

首先，你会看到你最后一行 function 中的console.log变成了我的 function 的第一行。 这是因为该行在异步 function fetch完成之前执行。

如您所见， fetch的最后一个返回变量在第一个then中可用，而then then可用。

1. 那么对于你的第一个问题， then谁调用回调 function 呢？ 显然，您可以从 function 的async/await等效项中看到，它是按顺序执行的。 前一个then的返回结果将是下一个then的参数。 因此，在第二个then中，当您return; ，它不会停止执行第三个then ，而是第三个then将接收undefined作为response参数。

2. 如对问题 1 的回答所述，只要没有未处理的错误或拒绝 promise，则then函数会自动按顺序执行。 但是，对于第二个/第三个/第四个then回调 function 从第一个then访问参数，不可能直接访问，除非您将它与后续then的每个 return 一起传递。 这可以通过使用 then async/await运算符而不是then轻松实现。

3. 当抛出错误时，代码究竟是如何知道跳转到 catch function 的？ 在异步 function 中，抛出错误几乎等同于拒绝 promise。 这样想，每个then回调都包装在一个try/catch块中，该块将调用catch中的 function 。

编辑：如果您执行fetch().then().then().catch() ，所有错误或被拒绝的承诺都将在 catch function 中处理。 但是如果你执行fetch().catch().then().then() ，只有错误或被拒绝的fetch将在 catch function 中处理。