浅谈ES6的Promise

Promsise

Promise相当与异步操作结果的占位符,他不会去订阅一个事件,也不会传递一个回调函数给目标函数,而是让函数返回一个Promise。

Promise的生命周期

Promise有一个短暂的生命周期,它会先处于进行中(pending)的状态,经过处理之后会变为以下两种的一个:

  1. Fulfilled: Promise异步操作完成。
  2. Rejected: 由于程序的错误或者其他原因,导致一部操作未能完成。
// 成功
let promise = new Promise((resolve, reject) => {
    resolve(42)
})

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

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

promise.catch((value) => {
    console.log(value) // 42
})
复制代码

当调用resolve时表示成功时候的回调,reject表示失败时候的回调分别对应的时then和catch

串联Promise

Promise所能实现的远超我们目之所及,尤其是将很多Promise串联起来实现更复杂的异步操作。每次调用then()或者catch()实际上是创建并返回了另一个Promise,只有当第一个解决或者拒绝之后,第二个才会被解决。

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

p1.then(value => {
    console.log(value)
}).then(() => {
    console.log('finish')
})
复制代码

它相当于

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

let p2 = p1.then(value => {
    console.log(value)
})

p2.then(() => {
    console.log('finish')
})
复制代码

Promise链的返回值

如果在完成处理程序中指定了一个返回值,则可以沿着这条链继续传递数据

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

p1.then(value => { // 此处的then换成catch也会一样
    console.log(value) // 42
    return value + 1
}).then(value => {
    console.log(value)  // 43
})
复制代码

在Promise中返回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
})
复制代码

在这段代码中,p1处理结束后返回了一个已解决状态的p2,由于p2已经完成,一次第二个完成处理程序被调用,如果p2被拒绝则调用拒绝程序。

响应多个Promise

Promise.all()

promise.all()方法只接受一个参数并返回一个promise。他会等所有的Promise运行完毕之后才返回结果。

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])
})
复制代码

// 如果其中一个被拒绝,那么返回的Promise会被立即拒绝

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
})
复制代码

Promise.race()

它和all方法的不同就是它不会全部结果,他会返回最快运行结束的Promise

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
})
复制代码

// 如果其中一个被拒绝的话会立即返回一个Promise

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
})
复制代码

自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)
}))
复制代码

这个实例中,模仿resolve的success方法以及模仿reject的failure方法,派生的Proomise和原Promise功能一样只不过多了两个方法。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享