Learn Promise from a few front end tests

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Learn Promise from a few front end tests

1. What is the output of the following code?

Promise.resolve(10).then(res= > {
    console.log(res)
}).catch(error= > {
    console.log(error)
}).then(res= > {
    console.log(res)
})

Promise.resolve(10).then(res= > {
    console.log(res)
}).then(res= > {
    console.log(res)
}).catch(error= > {
    console.log(error)
})

Promise.reject(10).then(res= > {
    console.log(res)
}).catch(error= > {
    console.log(error)
}).then(res= > {
    console.log(res)
})

Promise.reject(10).then(res= > {
    console.log(res)
}).then(res= > {
    console.log(res)
}).catch(error= > {
    console.log(error)
})
Copy the code

I thought I got it at first, but the interviewer laughed after I said the answer. Interviewer: Dude, go back and learn more about how Promise works.

The following are some of the key points in this question:

1. becausePromise.prototype.then 和  Promise.prototype.catchMethods return promises, so they can be called chained.
2. If the callback argument for a state is null (undefined), MDN describes it this way.

Note: If you omit a callback argument for a state or provide a nonfunction argument, the then method loses information about the callback function for that state, but does not generate an error. If the fulfillment or rejection of the Promise calling THEN changes and there is no callback to that state in then, then creates a new Promise object that is not processed by the callback. This new Promise simply accepts as its final state the final state of the original Promise that called the THEN.

Promise has default processing if no corresponding callback function is passed in. Returns a new Promise with the same final state as the original Promise.

3. The return value of then() is related to the callback function passed in then().

We do not refer specifically to accept or reject callback functions, but can discuss them together.

The callback function in then()	Then returns a Promise
A value is returned	thenthenThe returned Promise will becomeAn accepting stateAnd takes the returned value as the parameter value of the callback function that accepts the state.
No value is returned	thenthenThe returned Promise will becomeAn accepting state, and the parameter value of the callback function that accepts the state isundefined.
Throw an error	thenthenThe returned Promise will becomeDeclined to stateAnd takes the thrown error as an argument value to the state-rejecting callback.
Returns an already accepted state (fulfilledThe Promise)	thenthenThe return Promise will also becomeAn accepting stateAnd take the acceptance state callback of the Promise as the acceptance state callback of the returned Promise.
Returns an already rejected state (rejectedThe Promise)	thenthenThe return Promise will also becomeDeclined to stateAnd take the value of the Promise rejection state callback as the value of the returned Promise rejection state callback.
Returns an undetermined state (pendingThe Promise)	thenthenSo is returning the Promise statependingAnd its final state is the same as the final state of the Promise; At the same time, the callback that it calls when it goes to its final state is the same as the callback that the Promise calls when it goes to its final state.

4. Catch () is special then()

The catch() method returns a Promise (en-us) and handles the rejection. It behaves the same as calling promise.prototype. then(undefined, onRejected). In fact, calling obj.catch(onRejected) internal calls obj.then(undefined, onRejected).

And with that, we can answer the question

Promise.resolve(10).then(res= > {
    console.log(`res00 => ${res}`)
}).catch(error= > {
    console.log(`error => ${error}`)
}).then(res= > {
    console.log(`res01 => ${res}`)})// res00 => 10
// res01 => undefined

This is a big pity. /* 1. The first then() registers the depressing state callback function, This will be a big pity. This will be a big pity. This will be a big pity. This is a big pity, so return a promise(depressing,undefined) => knowledge 2 4. This will be a big pity (someday,undefined) => undefined. This will be a big pity (someday,undefined) => undefined
Copy the code

Promise.resolve(10).then(res= > {
    console.log(`res00 => ${res}`)
}).then(res= > {
    console.log(`res01 => ${res}`)
}).catch(error= > {
    console.log(`error => ${error}`)})// res00 => 10
// res01 => undefined

This is a big pity. /* 1. This is a big pity. This is a big pity. This is a big pity. The second then() registers the callback function for the depressing state, This will be a big pity. This will be a big pity. This will be a big pity. This will be a big pity, so return a promise(depressing,undefined) => knowledge 2 */
Copy the code

Promise.reject(10).then(res= > {
    console.log(`res00 => ${res}`)
}).catch(error= > {
    console.log(`error => ${error}`)
}).then(res= > {
    console.log(`res01 => ${res}`)})// error => 10
// res01 => undefined

/* 1. Reject () returns a rejected promise. This is a big pity; then() registers the callback function which is fulfilled in the rejected state, and then() registers the callback function which is fulfilled in the rejected state, so return a promise(rejected,10). This is a big pity. This is a big pity. This is a big pity. This will be a big pity (someday,undefined) => undefined. This will be a big pity (someday,undefined) => undefined
Copy the code

Promise.reject(10).then(res= > {
    console.log(`res00 => ${res}`)
}).then(res= > {
    console.log(`res01 => ${res}`)
}).catch(error= > {
    console.log(`error => ${error}`)})// error => 10

/* 1. Reject () returns a rejected promise. This is a big promise(rejected,10) => then() which registers the fulfilled state callback function, and then() which registers the rejected state callback function, so return a promise(Rejected,10). This is a big pity; then() registers the callback function of the fulfilled state (rejected,10), so return a promise(rejected,10). Then () registers the callback function of the fulfilled state (rejected,10). This will be a pity,undefined => knowledge 3 */

Copy the code

2. Send 10 requests at the same time and do some processing after all of them succeed

A. all B. all C. all D. all

Promise.all([p1,p2,p3])
Copy the code

3. If there is a response within 5s, the response will be returned. If there is no response within 5s, the response will be returned.

We can use promise.race ()

function func(p1, ms = 5000){
    let p = new Promise((resolve,reject) = >{
        let t = setTimeout(() = >{
            resolve()
        },ms)
    })

    return Promise.race(p1,p)
}

Copy the code