共计 8561 个字符,预计需要花费 22 分钟才能阅读完成。
什么是 promise?
Promise(承诺),在程序中的意思就是承诺我过一段时间(通常是一个异步操作)后会给你一个结果,是 异步编程的一种解决方案。从语法上说,原生 Promise 是一个对象,从它可以获取异步操作的消息。
promise 的特点
- 对象的状态不受外界影响。
promise 有三种状态 pending
(进行中)fulfilled
(已成功)rejected
(已失败),只有异步操作的结果,才可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
- 一旦从等待状态变成为其他状态就永远不能更改状态了。
promise 只有两种状态改变:pending
(进行中)–> fulfilled
(已成功);pending
(进行中)–> rejected
(已失败)。
当状态改变结束时称为resolve
(已固定),一旦状态变为 resolved 后,就不能再次改变为Fulfilled
。
- 一旦新建 Promise 就会立即执行,无法中途取消。
- 如果不设置回调函数 callback,Promise 内部抛出的错误,就不会反应到外部。
- 当处于 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
promise 实例操作
首先创造了一个 Promise 实例
let promise=new Promsie(function(resolve,rejec){if(/* 异步执行成功 */){resolve(value);
}else{reject(error);
}
})
promise.then(function(){// 回调执行成功之后的操作},function(){// 回调执行失败之后的操作,可选});
Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject。它们是两个函数,由 JavaScript 引擎提供。当异步操作成功时(pending--fulfilled
),调用 resolve(value)
函数把操作结果当成参数传出,当异步操作成功时(pending--rejected
)调用 reject(error)
函数把错误返回。Promise 实例生成以后,用 then
方法分别指定 resolved 状态和 rejected 状态的回调函数。
下面看一下构造函数原型的方法
-
Promise.prototype.then()
-
Promise.prototype.then()
作用是为 Promise 实例添加状态改变时的 回调函数。接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用,第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中,第二个函数是可选的,不一定要提供。 - 而
Promise.prototype.then()
返回的是另一个 Promise 对象,后面还可以接着调用 then 方法。
-
-
Promise.prototype.catch()
-
Promise.prototype.catch()
则是.then(null, rejection)
或.then(undefined, rejection)
的别名,用于指定发生错误时的回调函数。Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获。 -
Promise.catch()
方法返回的也是一个 Promise 对象,因此后面还可以接着调用 then 方法。
-
上述代码也可以理解成这样:
getJSON('/posts.json').then(function(posts) {// ...}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
-
Promise.prototype.finally()
-
finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的回调函数。该方法是 ES2018 引入标准的。 -
finally
方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是 fulfilled 还是 rejected。这表明,finally
方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。 -
finally
本质上是then
方法的特例。promise.then(()=>{}).catch(()=>{}).finally(() => {// 操作}); // 等同于 promise.then(result => { // 操作 return result; }).catch( error => { // 操作 throw error; });
-
-
promise 的链式调用
- 由于
.then
每次调用返回的都是一个新的 Promise 实例,如果 then 中返回的是一个结果的话会把这个结果传递下一次 then 中的成功回调,所以可以链式调用该实例。 - 如果 then 中出现异常, 会走下一个 then 的失败回调,catch 会捕获到没有捕获的异常。
-
在 then 中使用了 return,那么 return 的值会被
Promise.resolve()
包装,then 中也可以不传递参数,如果不传递会透到下一个 then 中。Promise.resolve(1).then(res => {console.log(res) return 2 // 包装成 Promise.resolve(2) }).catch(err => 3).then().then(res => console.log(res))
- 由于
promise 自身 API
- Promise.resolve()
将现有的对象转换(包装)成 promise 对象。
四种参数类型:
-
不带参数传递 — 返回一个新的状态为 resolve 的 promise 对象。
let p = Priomse.resolve() // p 就是 promise
- 参数是一个 Promise 实例 — 返回 当前的 promise 实例
-
参数是带 then 方法的对象
let data = {then:function(resolve,reject){resovle('带 then 方法的对象') } } Promise.resolve(data).thne((res)=> console.log(res)) // '带 then 方法的对象'
返回一个新的 promise,并直接执行
then
的方法,promise 对象的状态就变为resolved
,从而立即执行最后那个 then 方法指定的回调函数,输出'带 then 方法的对象'
。
-
参数是非空,非 then 方法的对象,非 proimse 的
let p = Promise.resolve('foo') // 等价于 let p = new Promise(resolve => resolve('foo')) p.then(res=>console.log(res)) //'foo'
返回一个新的状态为 resolve 的 promise 对象,所以
then
回调函数会立即执行。Promise.resolve
方法的参数,会同时传给回调函数。 -
Promise.reject()
-
参数为非 then 对象时 —–
Promise.reject(reason)
方法也会返回一个新的 Promise 实例,该实例的状态为rejected
let p = Promise.reject('error') // 等价于 let p = new Primose((resolve,reject)=>reject('出错了')}) // 处理错误的回调 p.then((null,res)=>console.log(res)) //'出错了'
-
参数是带 then 方法的对象 — 返回的并不是
then
方法的回调函数,而是 data 对象本身let data = {then:function(resolve,reject){reject('带 then 方法的对象出错了') } } Promise.resolve(data).thne((null,res)=> console.log(res)) // data // 等同于 Promise.resolve(data).catch(res=> console.log(res)) // data
-
-
Promise.all()
该方法将多个 promise 实例,包装成一个新的 promise 实例。let p = Promise.all([p1,p2,p3])
参数不一定为数组,但必须为一个可迭代
Iterator
,且返回的每个成员(p1,p2,p3)都是 Promise 实例,如果不是,就会先调用的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。var p = Promise.all([1,2,3]); var p2 = Promise.all([1,2,3, Promise.resolve(444)]); var p3 = Promise.all([1,2,3, Promise.reject(555)]); setTimeout(function() {console.log(p);// Promise {<state>: "fulfilled", <value>: Array[3] } console.log(p2); // Promise {<state>: "fulfilled", <value>: Array[4] } console.log(p3); // Promise {<state>: "rejected", <reason>: 555} }); p.then(function (posts) {// .. 当有返回值的时候才会回调}).catch(function(reason){// ...});
- 当
p1
,p2
,p3
中得实例都改变成fulfilled
(已成功)时,此时 p1、p2、p3 的返回值组成一个数组,传递给 p 的回调函数。 - 当
p1
,p2
,p3
中得实例其中一项的改变成rejected
(已失败)时,p 的状态就变成rejected
,此时第一个被 reject 的实例的返回值,会传递给 p 的回调函数。 -
Promise.all()是 异步解析 , 只有这当所有实例的状态都变成
fulfilled
,或者其中有一个变为rejected
,才会调用 Promise.all 方法后面的回调函数then
,catch
方法。但是 当且仅当传递的 iterable 为空时 ,Promise.all 才会 同步解析。var p = Promise.all([]); console.log(p);//Promise {<state>: "fulfilled", <value>: Array[0] }
-
处理错误 ,常规情况下,当其中一个实例返回
rejected
,就会调用Promise.all
的catch
方法,返回第一个错误。但实际应用时,我们想让所有的实例不论成功或失败就可以返回参数组成数组,这时就可以调用实例自身的catch
方法来规避这种情况。const p1 = new Promise((resolve, reject) => {resolve('hello'); //resolved }).then(result => result).catch(e => e); const p2 = new Promise((resolve, reject) => {throw new Error('报错了');//rejected }).then(result => result).catch(e => e); Promise.all([p1, p2]) .then(result => console.log(result))// ["hello", Error: 报错了] .catch(e => console.log(e));
- 当
p1 会 resolved
,p2 首先会rejected
,但是 p2 有自己的 catch 方法,该方法返回的是一个新的 Promise 实例,p2 指向的实际上是这个实例。该实例执行完 catch 方法后,也会变成 resolved,导致Promise.all() 方法参数里面的两个实例都会 resolved,因此会调用 then 方法指定的回调函数,而不会调用 catch 方法指定的回调函数。
-
js 原生实现 Promise.all 的原理
// 在 Promise 类上添加一个 all 方法,接受一个传进来的 promise 数组 Promise.all = function (promiseArrs) {return new Promise((resolve, reject) => { // 返回一个新的 Promise let arr = []; // 定义一个空数组存放结果 let i = 0; function handleData(index, data) { // 处理数据函数 arr[index] = data; i++; if (i === promiseArrs.length) { // 当 i 等于传递的数组的长度时 resolve(arr); // 执行 resolve, 并将结果放入 } } for (let i = 0; i < promiseArrs.length; i++) { // 循环遍历数组 promiseArrs[i].then((data) => {handleData(i, data); // 将结果和索引传入 handleData 函数 }, reject) } }) }
-
如果说 all 体验不好,那我们也可以自己做一个 some 方法,表示全部失败才算失败
Promise.some = function (promiseArrs) {return new Promise((resolve, reject) => {let arr = []; // 定义一个空数组存放结果 let i = 0; function handleErr(index, err) { // 处理错误函数 arr[index] = err; i++; if (i === promiseArrs.length) { // 当 i 等于传递的数组的长度时 reject(err); // 执行 reject, 并将结果放入 } } for (let i = 0; i < promiseArrs.length; i++) { // 循环遍历数组 promiseArrs[i].then(resolve, (e) => handleErr(i, e)) } }) }
-
Promise.allSettled — 兼容性不友好
该方法和 promise.all 类似,就是 解决 all 方法在处理错误时的不合理而出现的。其参数接受一个 Promise 的数组, 返回一个新的 Promise, 唯一与 all 的不同在于, 其不会进行短路, 也就是说当 Promise 全部处理完成后我们可以拿到每个 Promise 的状态, 而不管其是否处理成功。-
和 all 类似,当自身实例有 catch 回调时,每个实例状态变为
fulfilled
const p3 = new Promise((resolve, reject) => {resolve('hello'); //resolved }).then(result => result).catch(e => e); const p4 = new Promise((resolve, reject) => {throw new Error('报错了');//rejected }).then(result => result).catch(e => e); Promise.allSettled([p3, p4]) .then(result => console.log(result)) .catch(e => console.log(e)); //.then 的 log //[{status: "fulfilled", value: "hello"},{status: "fulfilled", reason: Error: 报错了 at <anonymous>:6:10 at new Promise (<anonymous>) at <anonymous>:5:13}]
-
没有 catch 接收错误,返回自身的状态和回调参数
const p5 = new Promise((resolve, reject) => {resolve('hello'); //resolved }).then(result => result) const p6 = new Promise((resolve, reject) => {throw new Error('报错了');//rejected }).then(result => result) Promise.allSettled([p5, p6]) .then(result => console.log(result)) .catch(e => console.log(e)); //.then 的 log //[{status: "fulfilled", value: "hello"},{status: "rejected", reason: Error: 报错了 at <anonymous>:6:10 at new Promise (<anonymous>) at <anonymous>:5:13}]
-
- Promise.race()
该方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例,其他特点和 all 很像,和 all 的区别在于:race 方法好比是赛跑,几个实例一起跑,谁先到就成功了,就 resolve 谁,或者谁跑到中途摔了出现异常状况失败了,就 reject 谁,不论成功还是失败,就先捕获第一个完成的。
-
捕获第一个成功的实例回调函数
let p1 = Promise.resolve('1') let p2 = Promise.resolve('2') Promise.race([p1,p2]).then(res=>conseloe.log(res))// '1'
-
捕获第一个结果
let p1 = Promise.resolve("1"); let p2 = Promise.reject("ERR2"); Promise.race([p1,p2]).then(res=>conseloe.log(res)) //Promise {<resolved>: "1"}
-
捕获第一个错误
let p1 = Promise.reject("ERR1"); let p2 = Promise.reject("ERR2"); Promise.race([p1,p2]).catch(console.log) //Promise {<reject>: "ERR1"}
-
原生实现 Promise.race()的设计原理
Promise._race = iterator =>{return new Promise((resolve,reject)=>{ iterator.forEach(item=>{Promise.resolve(item).then(resolve).catch(reject) }) }) }
- Promise.try– 提案
在实际开发使用 promise 时,希望经过 promise 包装后的函数内部代码 让同步函数同步执行,异步函数异步执行,并且让它们具有统一的 API
例:当同步函数被 promise 包装后的执行顺序改变。
let fn = () =>console.log('同步 1');
Promise.resolve().then(fn)
console.log('同步 2')
//log 后
//'同步 2'
//'同步 1'
-
解决让同步函数同步执行,异步函数异步执行现阶段方法
-
-
方法一:使用 async 匿名函数, 会立即执行里面的 async 函数,因此如果 f 是同步的,就会得到同步的结果;如果 f 是异步的,就可以用 then 指定下一步,如果想捕获错误,使用 catch 方法。
let fn = () =>console.log('同步 1'); (async ()=>fn())() .then(resolve) .catch(err=>console.log(err)) console.log('同步 2') //log 后 //'同步 1' //'同步 2'
-
-
方法二:使用 promise 立即执行的匿名函数
let fn = () =>console.log('同步 1'); (() => new Promise(resolve => resolve(fn()) ))() console.log('同步 2') //log 后 //'同步 1' //'同步 2'
-
Promise.try 的应用
该方法是用来模拟try
的代码块的,就像promise.catch
模拟的是catch
代码块。-
理解
try catch finally
try catch 是 JavaScript 的异常处理机制,把可能出错的代码放在 try 语句块中,如果出错了,就会被 catch 捕获来处理异常。如果不 catch 一旦出错就会造成程序崩溃。finally:无论结果如何,允许在 try 和 catch 之后执行代码。
try {// 供测试的代码块} catch(err) {// 处理错误的代码块} finally {// 无论 try / catch 结果如何都执行的代码块}
-
应用
let fn = () => console.log('同步 1'); Promise.try(fn); console.log('同步 2'); //'同步 1' //'同步 2'
-
over~ 有问题留言
拓展:
- 什么是 Iterator?
- 异步编程是什么?异步编程都有哪些解决方案?
- 如何使用 promise 实现 ajax,封装 axios?
- 如何使用纯原生 js 实现 promise?
借鉴:
https://blog.csdn.net/sjw1039…
http://es6.ruanyifeng.com/#do…
https://developer.mozilla.org…