An understanding of a promise’s weird title

The problems to be solved are as follows:

Promise.resolve().then(() = > {
    console.log(0);
    return Promise.resolve(4);
}).then((res) = > {
    console.log(res)
})

Promise.resolve().then(() = > {
    console.log(1);
}).then(() = > {
    console.log(2);
}).then(() = > {
    console.log(3);
}).then(() = > {
    console.log(5);
}).then(() = >{
    console.log(6);
})
Copy the code

The output is 0,1,2,3,4,5,6 in order

1, analysis,

In general, when promise.resolve () is encountered, new Promise(resolve => {resolve()}) is completed synchronously without consuming microtasks. But it’s important to note that we start with three sets of code:

/ / code 1
new Promise(resolve= > {
    resolve(Promise.resolve(4));//resolve了一个Promise
})
.then((res) = > {
    console.log(res)
})
Copy the code

/ / code 2
Promise.resolve().then(() = > {
    return Promise.resolve(4);//return了一个Promise
})
.then((res) = > {
    console.log(res)
})
Copy the code

/ / code 3
Promise.resolve().then(() = > {
    return 4;//return a 4 of type Number
})
.then((res) = > {
    console.log(res)
})
Copy the code

All three of these outputs, they print out the number 4.

We can see the difference, and code 3 is our most common case. The res printed in code 3 is 4, the same data type as the return above. This is a big pity. Then why are the res of code 1 and code 2 not the Promise of type Object {< depressing >: 4}?

In general:

Promise.resolve().then(() = > {
    return 4;
})
Copy the code

In this code, promise.resolve ().then is a constructor,() => {return 4; } is an argument to the function called, which returns a Promise(new Promise(resolve => resolve(4)) with a value of 4.

And in the

new Promise(resolve= > {
    resolve(Promise.resolve(4));//resolve了一个Promise
})
Copy the code

Promise.resolve().then(() = > {
    return Promise.resolve(4);//return了一个Promise
})
Copy the code

This is a big pity, because JS will first evaluate the value of the Promise object when it meets a Promise object, that is, the state of the Promise is fulfilled or the value of rejected (if this value is’ A ‘). This value is then used as the return value of the new Promised Promsie(that is, new Promise(resolve => resolve(‘a’))) as the Promise of the lower chain call.

2, the conclusion

There are differences between the Promise implemented within Chrome and the standard Promise/A+ specification. Internal browser implementation differences. Resolve or return encounters a Promise and gets the Promise value wrapped in a microtask. A second microtask is generated when the return value is passed outwards.

So the code

/ / code 1
new Promise(resolve= > {
    resolve(Promise.resolve(4));//resolve了一个Promise
})
.then((res) = > {
    console.log(res)
})
Copy the code

Can be understood as

new Promise(resolve= > {
    resolve(4);
})
.then()
.then()
.then((res) = > {
    console.log(res)
})
Copy the code

The corresponding code

/ / code 2
Promise.resolve().then(() = > {
    return Promise.resolve(4);//return了一个Promise
})
.then((res) = > {
    console.log(res)
})
Copy the code

Can be understood as

Promise.resolve()
.then(() = > {
    return 4;
})
.then()
.then()
.then((res) = > {
    console.log(res)
})
Copy the code

If a non-promise value is returned, there will be two more microtasks. Then () then()

The other

Promise.resolve().then(() = > {
    return Promise.resolve(Promise.resolve(Promise.resolve(4)))
})
.then(res= > {
    console.log(res);
})
Copy the code

Resolve (promise.resolve (promise.resolve (4))), which nested multiple promises, is the same as Promise.resolve(4), and does not generate more microtasks. Because there is no need to wait for the Promsie status of these two pieces of code to become a depressing process. Instead, it gets its value, and when it runs backwards, it creates a microtask.

But if it is

Promise.resolve().then(() = > {
    return new Promise(resolve= > {
            resolve(4)
    })
    .then(res= > {
            return 4.1
    })
    .then(res= > {
            return 4.2
    })
})
.then(res= > {
    console.log(res);
})
Copy the code

Then (res => {console.log(res); }) To run, you need to wait for the Promise state of the previous return to become a big pity.

new Promise(resolve= > {
        resolve(4)
})
.then(res= > {
        return 4.1
})
.then(res= > {
        return 4.2
})
Copy the code

Two microtasks are registered, and when the value is retrieved, two more tasks are generated (wrapper value once, return once) when running backwards.

3, review

Let’s review the title at the beginning of the article

Promise.resolve().then(() = > {
    console.log(0);
    return Promise.resolve(4);
}).then((res) = > {
    console.log(res)
})

Promise.resolve().then(() = > {
    console.log(1);
}).then(() = > {
    console.log(2);
}).then(() = > {
    console.log(3);
}).then(() = > {
    console.log(5);
}).then(() = >{
    console.log(6);
})
Copy the code

According to the above analysis, it can be translated into

Promise.resolve().then(() = > {
    console.log(0);
    return 4;
})
.then()
.then()
.then((res) = > {
    console.log(res)
})

Promise.resolve().then(() = > {
    console.log(1);
}).then(() = > {
    console.log(2);
}).then(() = > {
    console.log(3);
}).then(() = > {
    console.log(5);
}).then(() = >{
    console.log(6);
})
Copy the code

The results are 0,1,2,3,4,5,6

Topic 2

Promise.resolve().then(() = > {
    return new Promise(resolve= > {
         resolve(4)
    })
    .then(res= > {
         console.log(res, 'then4_1');
         return 4.1
    })
    .then(res= > {
         console.log(res);
         return 4.2
    })
})
.then(res= > {
   console.log(res, 'then4_2');
})

Promise.resolve().then(() = > {
    console.log(1);
}).then(() = > {
    console.log(2);
}).then(() = > {
    console.log(3);
}).then(() = > {
    console.log(5);
}).then(() = >{
    console.log(6);
})
Copy the code

The run result is

Topic 3

Promise.resolve().then(() = > {
    console.log(0);
    return Promise.resolve(Promise.resolve(Promise.resolve(4)));
}).then((res) = > {
    console.log(res)
})

Promise.resolve().then(() = > {
    console.log(1);
}).then(() = > {
    console.log(2);
}).then(() = > {
    console.log(3);
}).then(() = > {
    console.log(5);
}).then(() = >{
    console.log(6);
})
Copy the code

Run result 0,1,2,3,4,5,6

Refer to the article

An in-depth look at the Promise microtask registration and execution process

Start with a Promise interview question that keeps me up at night and dive into the Promise implementation details