Promsise

A Promise is a placeholder for the result of an asynchronous operation. Instead of subscribing to an event or passing a callback to the target function, the function returns a Promise.

The Promise lifecycle

A Promise has a short life cycle. It is in the pending state and becomes one of two things after processing:

1. This is a big pity: Promise is completed asynchronously.
2. Rejected: Indicates that an operation cannot be completed due to program error or other reasons.

/ / success
let promise = new Promise((resolve, reject) = > {
    resolve(42)
})

promise.then((value) = > {
    console.log(value) / / 42
})

/ / fail
let promise = new Promise((resolve, reject) = > {
    reject(42)
})

promise.catch((value) = > {
    console.log(value) / / 42
})
Copy the code

Resolve represents a successful callback, reject represents a failed callback, and then and Catch, respectively

Tandem Promise

Promises can do much more than we realize, especially by concatenating many promises together for more complex asynchronous operations. Each call to THEN () or catch() essentially creates and returns another Promise, which will only be resolved if the first one is resolved or rejected.

let p1 = new Promise((resolve, reject) = > {
    resolve(42)
})

p1.then(value= > {
    console.log(value)
}).then(() = > {
    console.log('finish')})Copy the code

It is equivalent to

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = p1.then(value= > {
    console.log(value)
})

p2.then(() = > {
    console.log('finish')})Copy the code

The return value of the Promise chain

If a return value is specified in the completion handler, the data can be passed along the chain

let p1 = new Promise((resolve, reject) = > {
    resolve(42) // reject(42)
})

p1.then(value= > { // Then is catch
    console.log(value) / / 42
    return value + 1
}).then(value= > {
    console.log(value)  / / 43
})
Copy the code

Return a Promise in a Promise

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = new Promise((resolve, reject) = > {
    resolve(43)
})

p1.then(value= > {
    console.log(value) / / 42
    return p2
}).then(value= > {
    console.log(value) / / 43
})
Copy the code

In this code,p1 returns a resolved state of P2 after processing, and since P2 has completed, a second completion handler is called once, and the rejection is called if P2 is rejected.

Respond to multiple Promises

Promise.all()

The promise.all() method takes only one argument and returns a promise. He waits for all the promises to run before returning the results.

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = new Promise((resolve, reject) = > {
    resolve(43)})let p3 = new Promise((resolve, reject) = > {
    resolve(44)})let p4 = Promise.all([p1,p2,p3])

p4.then(value= > {
    console.log(Array.isArray(value)) // true
    console.log(value[0])
    console.log(value[1])
    console.log(value[2])})Copy the code

// If one of them is rejected, the returned Promise is rejected immediately

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = new Promise((resolve, reject) = > {
    reject(43)})let p3 = new Promise((resolve, reject) = > {
    resolve(44)})let p4 = Promise.all([p1,p2,p3])

p4.catch(value= > {
    console.log(Array.isArray(value)) // false
    console.log(value) / / 43
})
Copy the code

Promise.race()

It differs from the all method in that it does not yield all results, but returns the Promise of the soonest completion of the run

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = new Promise((resolve, reject) = > {
    resolve(43)})let p3 = new Promise((resolve, reject) = > {
    resolve(44)})let p4 = Promise.race([p1,p2,p3])

p4.then(value= > {
    console.log(value) / / 42
})
Copy the code

// If one of them is rejected, a Promise is immediately returned

let p1 = new Promise((resolve, reject) = > {
    resolve(42)})let p2 = new Promise((resolve, reject) = > {
    resolve(43)})let p3 = new Promise((resolve, reject) = > {
    resolve(44)})let p4 = Promise.race([p1,p2,p3])

p4.catch(value= > {
    console.log(value) / / 43
})
Copy the code

Inheritance from Promise

class MyPromise {
    success(resolve, reject) {
        return this.then((resolve, reject))
    }
    failure(reject) {
        return this.catch((reject))
    }
}

let promise = new MyPromise((resolve, reject) = > {
    resolve(42)
})

promise.success((value= > {
    console.log(value) / / 42
})).failure((value= > {
    console.log(value)
}))
Copy the code

In this example, the Proomise is modeled after the success method of Resolve and the failure method of Reject. The Proomise function is the same as the original Promise function, but with two more methods.