es6 快速入门 系列 —— promise

Promise

Promise 是一种异步编程的选择

初步认识Promise

用 Promise 来实现这样一个功能：发送一个 ajax，返回后输出 json 数据。请看示例：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        let json = {success: true, data:{}}
        resolve(json);
    }, 3000);
});
const resolveFn = value => {
    console.log(value)
};
const rejectFn = () => {}

promise1.then(resolveFn, rejectFn)

// { success: true, data: {} }

三秒后输出 json 数据。

Promise 中文翻译是承诺。首先用 Promise 构造函数创建一个承诺，承诺异步操作在未来的某时刻完成，接着给承诺（promise1）绑定”已完成“状态的回调 resolveFn，以及”已拒绝“状态的回调 rejectFn。3秒后返回 json 数据，将承诺的状态改为”已完成“（resolve(json)），对应的回调函数（resolveFn）被调用执行。

每个 Promise 都会经历一个短暂的生命周期，首先是进行中（pending）的状态，一旦异步操作执行结束，Promise则变成已处理的状态。在前面示例中，执行 new Promise() 创建一个 Promise，是进行中的状态，操作结束后，Promise 可能会进入到以下两个状态中的其中一个：

• 已完成（Fulfilled） Promise异步操作成功完成
  • 调用 resolve() 进入此状态
• 已拒绝（Rejected） Promise异步操作未能成功完成
  • 调用 reject() 进入此状态

创建 Promise

通过 new Promise(executor) 可以创建一个新的 Promise。新的 Promise 在没有 resolve 之前，这个 Promise 的状态是进行中（或未解决）。

executor（执行器）是一个双参函数，参数为 resolve 和 reject。Promise 构造器将会在返回新对象之前执行 executor，并传入 resolve 和 reject 函数。请看示例：

const promise1 = new Promise((resolve, reject) => {
    console.log(11)
})
console.log(22)
// 11 22

接着看这个示例：

const p1 = new Promise((resolve, reject) => {
    resolve()
    console.log(11)
})
p1.then(() => {
    console.log('then')
})
console.log(22)

// 11 22 then

调用 resolve() 后会触发一个异步操作，所以先执行同步（输出 11 22），最后输出 then。类似这段代码：

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('then')
    })
    console.log(11)
})

console.log(22)
// 11 22 then

then() 方法的两个参数都是可选的，可以按照任意组合方式监听 Promise。请看示例：

const promise1 = new Promise((resolve, reject) => {
    resolve(1)   // {1}
})

promise1.then(() => {
    console.log('完成')
})

promise1.then(() => {
    console.log('完成')
}, () => {
    console.log('拒绝')
})

promise1.then(null, () => {
    console.log('拒绝')
})

promise1.catch(() => {
    console.log('catch')
})

// 完成 完成

上面前 3 次 then() 调用操作的是同一个 Promise。第一个只监听了完成，错误是不报告；第二个同时监听了完成和拒绝；第三个只监听了拒绝，成功时不报告；

如果改为reject(1)（{1}），则输出“拒绝 拒绝 catch”。

无论何时都可以添加新的已完成或已拒绝处理程序。请看示例：

const promise1 = new Promise((resolve, reject) => {
    resolve();
});

promise1.then(function(cnt){
    console.log(1)
    promise1.then(function(cnt){   // {1}
        console.log(2)
    })
    console.log(3)
    return 4
}).then(v => {
    console.log(v)
})
// 1 3 2 4

这段代码在完成处理程序中，向同一个 Promise 添加了另一个完成处理程序（行{1}）。

Tip: then() 方法指定的回调函数将在当前脚本所有同步任务执行完才会处理。

创建已处理的 Promise

创建未处理的 Promise 最好方法是使用 Promise 构造函数，但如果想用 Promise 表示一个已知值，可以用Promise.resolve() 或者 Promise.reject()。

Promise.resolve

Promise.resolve(value)，只接受一个参数并返回一个 Promise。

let p1 = Promise.resolve(11) // {1}
p1.then(v => {
    console.log(v)
})
console.log(22)

// 输出：22 11

行{1}等价于let p1 = new Promise(resolve => resolve(11))。

如果给 Promise.resolve() 方法传入一个 Promise，那么这个 Promise 会被直接返回。请看示例

let p1 = new Promise((resolve, reject) => {
    resolve(1)   // {1}
})
// resolve另一个promise
let p2 = Promise.resolve(p1) 
console.log(p1 == p2)
p2.then(v => {
    console.log('resolve')
},v => {
    console.log('reject')
})

// true resolve

如果将行{1}改为reject(1)，输出“true reject”。

利用此特性，可以将不是 Promise 的值转为 Promise。

Promise.resolve() 方法允许调用时不带参数，直接返回一个resolved 状态的 Promise 对象。就像这样：

let p1 = Promise.resolve() 
p1.then(v => {
    console.log(v)
})
console.log(22)
// 输出：22 undefined

非 Promise 的 Thenable 对象

Promise.resolve() 可以接受非 Promise 的 Thenable 对象作为参数，返回的 Promise 将采用 Thenable 对象的最终状态。请看示例：

// Thenable 对象指：拥有 then() 方法并且接受 resolve 和 reject 两个参数的普通对象
let thenable = {
    then: function(resolve, reject){
        reject(1)
    }
}
let p1 = Promise.resolve(thenable)

p1.then(v => {
    console.log('resolve')
}).catch(v => {
    console.log('reject')
})

// reject

这段代码，虽然调用的是 Promise.resolve()，但 thenable 的状态是已拒绝（reject(1)），所以最后输出 reject。

Promise.reject

Promise.reject() 方法返回一个带有拒绝原因的 Promise 对象。请看示例：

let p1 = Promise.reject(11)
p1.catch(v => {
    console.log(v)
})
console.log(22)

// 输出：22 11

Promise.reject() 用法比 Promise.resolve() 简单很多。

比如给 Promise.reject() 方法传入一个 Promise，效果与 Promise.resolve() 不相同。请看示例：

let p1 = new Promise((resolve, reject) => {
    reject(1)
})
let p2 = Promise.reject(p1) 
console.log(p1 == p2) // false

再比如给 Promise.reject() 方法传入一个 thenable，效果与 Promise.resolve() 也不相同。请看示例：

let thenable = {
    then: function(resolve, reject){
        resolve(1)
    }
}
let p1 = Promise.reject(thenable)

p1.then(v => {
    console.log('resolve')
}).catch(v => {
    console.log('reject')
})

// reject

执行器错误

如果执行器内部抛出错误，则 Promise 的拒绝处理程序就会被调用，例如：

let p1 = new Promise(function(resolve, reject){
    throw new Error('fail')
})

p1.catch(v => {
    console.log(v.message) // fail
})

这段代码，执行器故意抛出一个错误，每个执行器中都隐含一个 try-catch 块，所以错误会被捕获并传入给已拒绝回调。此例等价于：

let p1 = new Promise(function(resolve, reject){
    try{
        throw new Error('fail')
    }catch(e){
        reject(e)
    }
})

...

串联 Promise

将 Promise 串联起来能实现更复杂的异步特征：

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

p1.then(v => {
    console.log(v)
}).then(() => {
    console.log('finished')
})

每次调用 then() 方法或 catch() 方法时，实际上会创建并返回另一个 Promise，只有当第一个 Promise 完成或拒绝后，第二个才会被解决，依此类推。

将这个示例拆开，看起来像这样：

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

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

p2.then(() => {
    console.log('finished')
})

捕获错误

在完成或拒绝处理程序中可能发生错误，而 Promise 链可以捕获这些错误。请看示例：

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

p1.then(() => {
    throw new Error('fail')
}).catch((e) => {
    console.log(e.message)
})

// 输出：fail

这段代码在完成处理程序中抛出一个错误。如果在拒绝处理程序中抛出错误，也可以通过相同的方式接收：

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

p1.catch(() => {
    throw new Error('fail')
}).catch((e) => {
    console.log(e.message)
})

// 输出：fail

尽量在 Promise 链的末尾留一个拒绝处理程序，以保证能正确处理所有可能发生的错误。请看示例：

如果没有拒绝处理程序，代码可能会这样：

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

p1.then(() => {
    console.log(1)   // {1}
}).then(() => {
    console.log(2)   // {2}
}).then(() => {
    console.log(3)   // {3}
})

其中三个完成处理程序都有可能出错，我们可以在末尾添加一个已拒绝处理的程序对这个链式统一处理，就像这样：

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

p1.then(() => {
    throw new Error('fail')
    console.log(1)
}).then(() => {
    console.log(2)
}).then(() => {
    console.log(3)
}).catch(e => {
    console.log(e.message)
})

// 输出：fail

这段代码是第一个完成处理程序报错，由于只有末尾才有已拒绝的处理，所以只输出 fail。

传递数据

Promise 链的另一个重要特性是可以给下游的 Promise 传递数据。请看示例：

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

p1.then(v => {
    console.log(v)
    return v + 1
}).then(v => {
    console.log(v)
})
// 输出：1 2

在拒绝处理程序中也可以做相同的事：

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

p1.catch(v => {
    console.log(v)
    return v + 1
}).then(v => {
    console.log(v)
})
// 输出：1 2

拒绝处理中返回值仍然可以在下一个Promise的完成处理程序中使用，必要时，即使其中一个Promise失败，也能恢复整条链的执行。

在 Promise 链中返回 Promise

前面我们通过返回值给下游 Promise 传递数据，如果返回值是 Promise 对象，则会通过一个额外的步骤来确定下一步该怎么走。请看示例：

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

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10) // {1}
    }, 3000)
})

p1.catch(v => {
    console.log('等待3秒')
    return p2
}).then(v => {
    console.log(`resolve: ${v}`)
}, v => {
    console.log(`reject: ${v}`)
})

/*
等待3秒
// 等待3秒后输出
resolve: 10
*/

这段代码，在 Promise 链中返回一个 Promise（p2），由于 p2 的状态是已完成（{1}），所以下一步则进入已完成处理程序。

响应多个Promise

es6 提供了 Promise.all() 和 Promise.race() 两个方法来监听多个 Promise。

Promise.all()

Promise.all 只接收一个参数并返回一个Promise，该参数是含有多个受监视Promise的可迭代对象（例如数组），只有当所有 Promise 都被解决，返回的 Promise 才会被解决。请看示例：

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

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 3000)
    
})

let p3 = Promise.all([p1, p2])

p3.then(value => {
    console.log(Array.isArray(value))   // {1}
    console.log(value)
}).catch(v => {
    console.log(Array.isArray(v))
    console.log(v)
})

// true
// [1, 2]

这段代码，Promise.all 监听了两个 Promise，其中一个需要过3秒才被置为已解决，当两个 Promise 都被解决，才会输出结果。其中 value（{1}）是数组。

如果被 Promise.all 监听的其中一个被拒绝，那么不用等所有 Promise 都完成就会立即被拒绝。在上面示例的基础上，将 resolve(1) 改为 reject(1)，立即输出false 1，无需等待另一个 Promise 解决。拒绝处理程序总是接受一个值而非数组。

Promise.race()

Promise.race() 与 Promise.all() 类似，不同之处是只要有一个被解决，返回的 Promise 就被解决。请看示例：

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

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 3000)
    
})

let p3 = Promise.race([p1, p2])
console.log(p3 === p1)
p3.then(v => {
    console.log(Array.isArray(v))
    console.log(`resolve, ${v}`)
}).catch(v => {
    console.log(Array.isArray(v))
    console.log(`reject, ${v}`)
})

/*
false
false
resolve, 1
*/

无需等待 p2 被解决，立刻输出。实际上，传给 Promise.race() 方法的 Promise 会进行竞选，以决定哪一个先被解决，如果先解决的是已完成 Promise，则返回已完成的 Promise，如果先解决的是已拒绝的 Promise，则返回已拒绝的Promise。请看示例：

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

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('p2 resolve')
        resolve(2)
    }, 3000)
})

let p3 = Promise.race([p1, p2])

p3.then(v => {
    console.log(Array.isArray(v))
    console.log(`resolve, ${v}`)
}).catch(v => {
    console.log(Array.isArray(v))
    console.log(`reject, ${v}`)
})
/*
false
reject, 1
p2 resolve
*/

p2 虽然被忽略，但仍会执行。

其他章节请看：

es6 快速入门 系列