当我们谈论promise的时候,是在谈论什么? 一个promise指的是什么? Promise, new Promise()得到的究竟是什么东西? 打开浏览器控制台,输出Promise的内部结构,可以看到Promise是一个构造函数,这个构造函数的作用就是将传递进来的普通函数变成一个被封装过的容器。
打开控制台,输入一下这个构造函数的内部结构,如下:
这个容器有几个特性
- 容器的操作结果,只由内部的函数决定,共有三种状态,pending,fufilled,rejected
- 容器的操作结果的修改是一次性的,不能二次改动。
具体如何使用它呢?可以看到红框里我圈出来的一些方法和属性,是我们比较常用的一些方法和属性。接下来进行一一说明
单独操作
Promise.resolve()
这个函数的作用,默认将arg包装成为一个resolved状态的promise容器进行返回。所以传入参数不同类型,对应的也就是不同的操作结果
//参数为空
Promise.resolve()
-Promise {<fulfilled>: undefined}
//参数为promise对象
Promise.resolve(new Promise((res, _) => {}))
-Promise {<pending>}
//参数为一个有then方法的普通对象
Promise.resolve({then: function() {console.log('test')}}})
-test
-Promise {<pending>}
//参数为一个基本类型的数据
Promise.resolve('hello')
-Promise {<fulfilled>: 'hello'}
Promise.resolve('hello').then(res => {console.log(res)})
-hello
总结:
- 参数为空对象,返回一个fufilled状态的promise,value值为undefined
- 参数为promise对象,直接将该promise对象返回,不做任何修改
- 参数为一个含有then()的对象,执行then()方法,并且返回一个pending状态的promise对象
- 参数为一个基本类型的数据,返回一个fufilled状态的promise对象,value值为该基本类型的值 总之这个方法的作用,就是将传入的数据包装成一个fufilled状态的promise对象。
Promise.reject()
这个方法和Promise.resolve()很相似,作用是将传入的参数,封装为一个状态为rejected状态的promise对象。针对不同的传入参数也有不同的输出。
//参数为空
Promise.reject()
-Promise {<rejected>: undefined}
//参数为一个promise对象
Promise.reject(new Promise((res, rea) => {}))
-Promise {<rejected>: Promise}
//参数为一个包含有then()和catch()的对象
Promise.reject({then: function() {console.log('test')}, catch: function(){console.log('catch')}})
//参数为基本类型的数据
Promise.reject('hello').then(res => console.log(res));
Promise {<rejected>: 'hello'}
总结:
- 参数为空,返回一个默认状态为rejected状态的promise, value为undefined
- 参数为promise对象,返回一个状态为rejected,value为传入promise的promise
- 参数为带有then()和catch()方法的对象,返回一个状态为rejected,value为传入对象的promise
- 参数为基本类型数据,返回状态为rejected,value为传入数据的promise对象
注意到一个现象就是,如果promise状态为rejected时,后面没有跟上catch(),会抛出一个错误。
Uncaught (in promise)
Promise.try()
包装出一个promise对象,不管内部的操作是否是异步操作,都可以使用then和catch的结构来处理后续的操作。
批量操作
批量操作就是将一个以上的promise对象组合起来,形成一个新的promise。这个新的promise的状态由内部几个promise来决定,至于如何决定,就取决于你使用的不同方法。
Promise.批量操作方法([P1, P2...])参数使用数组方式传入
Promise.all()
内部传入的promise全部为fufilled状态时,外部的promise状态才为fufilled状态,否则为rejected状态。是一个逻辑且的关系
Promise.allSettled()
与all()的区别在于,不需要每个promise的状态都为fufilled,只要是已经处理完成的状态,外部promise就是fufilled状态。
Promise.race()
race这个单词有赛跑,竞赛的意思,这里就是指外部promise状态由最快改变状态的promise来决定。
Promise.any()
这个方法和race的区别在于,race一旦在竞赛出结果之后就结束了。而any是一定得等到出现一个fufilled状态的promise。如果最后promise都为rejected状态,那么最终promise状态为rejected。
原型属性
Promise.prototype.then(arg1, arg2)
为promise添加状态改变的时候的回调函数,arg1, arg2分别为fufilled状态和rejected状态的回调函数。
Promise.prototype.catch()
为promise添加状态改变的时候的回调函数,reajected状态下的回调函数。关于错误处理,单独开一篇进行讲解。
Promise.prototype.finally()
添加无论什么状态都会执行的回调函数,使用场景就是在一个接口请求完毕之后,需要执行的操作在这里进行挂载,比如说关掉加载动画等等。