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.

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