promise.then 机制如何工作？

Question

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

   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 对象。哪个对象调用第二个then？是从第一次调用 when 时返回的还是从回调中返回的？
2. 我知道回调是“附加”到 fetch 函数的。例如，当 fetch 函数完成时，回调将被执行。 但是我不明白第二个、第三个和第四个 then 的调用方式和时间。第一个回调还包含一个异步函数** response.json()**，所以如果他需要 ，second when 将如何以及何时启动json.response 从第一个 when?
3. 如果第一次或第二次发生异常，代码如何知道跳转到catch函数？
   [1]：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 1

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

如果发生错误，链会中断，它会直接转到第一个 catch 函数。

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

Answer 2

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

相当于你的getCountryData函数如下

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');
    }
}

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

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

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

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

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

编辑：如果你做fetch().then().then().catch()，所有的错误或者被拒绝的promise都会在catch函数中处理。 但是如果你做fetch().catch().then().then()，只有来自fetch的错误或者被拒绝的promise会在catch函数中被处理。