es6 快速入门 系列 —— promise

其他章节请看:

es6 快速入门 系列

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 快速入门 系列

posted @ 2021-06-25 11:47  彭加李  阅读(416)  评论(0编辑  收藏  举报