How the promise.then mechanisem works?

Question

After watching the video, and reading in [Promise.then][1] i still don't understand how it works. So i wrote an example, and printed to console but still with the output i can't understand how does it work. I hope my question are clear enough, if not please tell me and i will try to elaborate them according to your responses. This is my code:

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

I can't understand the following things:

1. If we look for example on the first then, it gets a callback as a parameter, the callback returns a Promise object. Which object calls the second then? The one that was returned from the first call to when or the one that have been returned from the callback?
2. I understand that the callback is "attached" to the fetch function. e.g when the fetch function will be finished, the callback will be executed. But i can't understand how and when the second, third and fourth then are called. The first callback contains also an async function ** response.json()**, so how and when exactly the second when will be started if he need the json.response from the first when?
3. If an exception occur at the first or second, how exactly the code knows to jump to catch function?
   [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Answer 1

The then functions don't receive a callback, they receive the result of the previous async operation. So the result of the fetch is passed to the first then, the result of response.json() is passed to the second then and so on...

In case of error the chain broke and it goes directly to the firs catch function.

Under the hood there are more, consider that the fetch and other operations in the then functions can be asynchronous, so what happens in the runtime is that the result of the fetch function is pushed in the event queue and when the event loop takes your next then function is extracted from the queue and passed to the function.
This article explain how it works internally: https://www.digitalocean.com/community/tutorials/understanding-the-event-loop-callbacks-promises-and-async-await-in-javascript

Answer 2

I will try to explain this in a different way, using async/await operators.

The equivalent of your getCountryData function is as follows

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

First of all, you will see the console.log in your last line of function became the first line in my function. This is because the line is executed before the asynchronous function fetch completes.

As you can see, the last return variable from the fetch is available in the first then, and the last return variable from the then is available in the next then.

1. So for your first question, who calls the callback function in the next then? Obviously you can see from the async/await equivalent of your function, it is executed in sequence. The return result from the previous then will be the argument for the next then. Therefore in the second then, when you do return;, it will not stop executing the third then, but instead the third then will reveive undefined as the response argument.

2. As explained in answer to question 1, the then functions are executed in sequence automatically as long as there are no unhandled errors or rejected promise. However, for a second/third/forth then callback function to access the argument from the first then, it is not possible to access directly, unless you pass it along with every return from the subsequent then. This can be achieved easily by using then async/await operators instead of then.

3. How exactly does the code knows to jump to the catch function when an error is thrown? In an asynchronous function, throwing an error is almost equivalent to rejecting a promise. Think of it this way, every then callbacks are wrapped in a try/catch block that would call the function in the catch.

Edit: If you do fetch().then().then().catch(), all the errors or rejected promises will be handled in the catch function. But if you do fetch().catch().then().then(), only the error or rejected promise from fetch will be handled in the catch function.