一、首先看流程分析图:
二、知道Promise的大体框架
1、Promise构造函数:Promise(excutor) { }
- excutor函数:同步执行
(reslve,reject) => { }
- resolve函数:内部定义成功时我们调用的函数
value =>{ }
- reject函数:内部定义失败时我们调用的函数
reason => { }
说明:excutor会在promise内部立即同步回调,异步操作在执行器中执行。
2、Promise.propotype.then方法:(onResolved,onRejected) => { }
- onResolved函数:成功的回调函数
(value) => { }
- onRejected函数:失败的回调函数
(reason) => { }
说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调返会一个新的promise对象。
3、Promise.prototype.catch方法:(onRejected) => { }
onRejeted函数:失败的回调函数 (reason) => { }
说明:then()的语法糖,相当于:then(undefined,onRejected)
4、Promise.resolve方法:(value) => { }
value:成功的数据或promise对象
说明:返回一个成功/失败的promise对象
4、Promise.reject方法:(reason) => { }
value:成功的数据或promise对象
说明:返回一个失败的promise对象
- List item
三、搭建基本框架
//自定义Promise函数模块:采用立即执行函数
(function(window){
//1、Promise构造函数 excutor构造器函数(同步执行)
function Promise(excutor){
//定义两个用于改变Promise状态的函数
function resolve(value){
}
function reject(reason){
}
excutor(resolve,reject);
}
//2、Promise原型对象的then()方法,指定成功和失败的回调函数,返回一个新的Promise对象
Promise.prototype.then = function(onResolved,onRejected){
}
//3、Promise原型对象的catch()方法,指定失败的回调函数,返回一个新的Promise对象
Promise.prototype.catch = function(onResolved,onRejected){
}
//4、Promise函数对象resolve方法,返回指定结果的一个成功Promise,成功值为value
Promise.resolve = function(value){
}
//5、Promise函数对象reject方法,返回指定结果的一个失败Promise,失败值为reason
Promise.reject = function(reason){
}
//6、Promise函数对象的all方法,返回一个Promise,只有当所有的Promise都成功时才成功,否则失败
Promise.all = function(promises){
}
//7、Promise函数对象的race方法,返回一个Promise,其结构由第一个完成的Promise决定
Promise.race = function(Promises){
}
//8、向外暴露Promise函数
window.Promise = Promise;
})(window)
四、Promise构造函数实现:
- 定义一个常量用来存this的指向。
- 定义一个状态属性 status、定义一个用来存数据的属性 data、定义一个用来缓存回调函数 callbacks。
- 定义两个用于改变Promise状态的函数 resolve 和 reject
- 函数里面:首先判断当前状态是不是 ‘pengding’ 状态,如果是则直接返回,因为在promise中状态只能改变一次。其次改变当前的状态为对应的状态,再存入当前的数据。最后判断如果有待执行的callback函数,立即异步执行回调函数onResolved()/onRejected()
- try catch 用来捕获异常
//自定义Promise函数模块:采用立即执行函数
(function(window){
//1、Promise构造函数 excutor构造器函数(同步执行)
function Promise(excutor){
//定义一个常量用来存this的指向 (this的详细介绍后面的博客会跟进,多多关注哦!!!)
const self = this;
//定义一个状态属性,初始值为pending(Promise的pending的只能改变一次)
self.status = 'pending';
//给Promise对象指定一个用于存储数据结构的属性
self.data = 'undefined';
//缓存回调函数每个元素的结构{onResolved(){} , onRejected() {}}
self.callbacks = [];
//定义两个用于改变Promise状态的函数
function resolve(value){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== 'pending'){
return;
}
//将状态改为resolve
self.status = 'resolved';
//存数据
self.data = value;
//如果有待执行的callback函数,立即异步执行回调函数onResolved(在上一篇博客中我们有介绍promise的回调函数和状态先后改变的问题)
if(self.callbacks.length>0){
setTimeout(()=>{
self.callbacks.forEach(callbacksObj=> {
callbacksObj.onResolved(value);
})
})
}
}
function reject(reason){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== 'pending'){
return;
}
//将状态改为reject
self.status = 'rejected';
//存数据
self.data = reason;
//如果有待执行的callback函数,立即异步执行回调函数onReject
if(self.callbacks.length>0){
setTimeout(()=>{
self.callbacks.forEach(callbacksObj=> {
callbacksObj.onResolved(reason);
})
})
}
}
//立即同步执行excutor
//需要捕获异常
try{
excutor(resolve,reject); //调用了执行器
}catch(error){ //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
//2、Promise原型对象的then()方法,指定成功和失败的回调函数,返回一个新的Promise对象
Promise.prototype.then = function(onResolved,onRejected){
}
//3、Promise原型对象的catch()方法,指定失败的回调函数,返回一个新的Promise对象
Promise.prototype.catch = function(onResolved,onRejected){
}
//4、Promise函数对象resolve方法,返回指定结果的一个成功Promise,成功值为value
Promise.resolve = function(value){
}
//5、Promise函数对象reject方法,返回指定结果的一个失败Promise,失败值为reason
Promise.reject = function(reason){
}
//6、Promise函数对象的all方法,返回一个Promise,只有当所有的Promise都成功时才成功,否则失败
Promise.all = function(promises){
}
//7、Promise函数对象的race方法,返回一个Promise,其结构由第一个完成的Promise决定
Promise.race = function(Promises){
}
//8、向外暴露Promise函数
window.Promise = Promise;
})(window)
五、Promise.then()方法和catch()方法的实现
-
定义一个常量,用来获取this的指向
-
指定回调函数的默认值:必须是函数,成功的回调函数继续向下传递返回一个value,失败的回调函数继续向下传递,定义一个抛出reason的函数。
-
返回一个新的promise对象。
1)指定成功和失败的回调函数(需要保存或者调用)取决于onResolved/onRejected的状态。
2)一共有三种状态,分别是 resolved,rejected,pending。
3)三个状态那就需要一个if else 的判断,在这里面pending状态下将成功和失败的回调函数保存callbacks容器中缓存起来,但是需要根据执行器的结果改变promise的状态。
4)封装一个函数,处理一个回调函数的调用,以及状态的改变。执行指定的回调函数,根据执行的结果改变return的promise的状态/数据。返回Promise的结果由onResolved/onRejected执行结果决定。Promise的结果一般有三种情况:1、是抛异常,2、不抛异常返回的是promise对象、3、不抛异常返回的是非promise对象。
//自定义Promise函数模块:采用立即执行函数
(function(window){
//1、Promise构造函数 excutor构造器函数(同步执行)
function Promise(excutor){
//定义一个常量用来存this的指向 (this的详细介绍后面的博客会跟进,多多关注哦!!!)
const self = this;
//定义一个状态属性,初始值为pending(Promise的pending的只能改变一次)
self.status = 'pending';
//给Promise对象指定一个用于存储数据结构的属性
self.data = 'undefined';
//缓存回调函数每个元素的结构{onResolved(){} , onRejected() {}}
self.callbacks = [];
//定义两个用于改变Promise状态的函数
function resolve(value){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== 'pending'){
return;
}
//将状态改为resolve
self.status = 'resolved';
//存数据
self.data = value;
//如果有待执行的callback函数,立即异步执行回调函数onResolved(在上一篇博客中我们有介绍promise的回调函数和状态先后改变的问题)
if(self.callbacks.length>0){
setTimeout(()=>{
self.callbacks.forEach(callbacksObj=> {
callbacksObj.onResolved(value);
})
})
}
}
function reject(reason){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== 'pending'){
return;
}
//将状态改为reject
self.status = 'rejected';
//存数据
self.data = reason;
//如果有待执行的callback函数,立即异步执行回调函数onReject
if(self.callbacks.length>0){
setTimeout(()=>{
self.callbacks.forEach(callbacksObj=> {
callbacksObj.onResolved(reason);
})
})
}
}
//立即同步执行excutor
//需要捕获异常
try{
excutor(resolve,reject); //调用了执行器
}catch(error){ //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
//2、Promise原型对象的then()方法,指定成功和失败的回调函数,返回一个新的Promise对象
Promise.prototype.then = function(onResolved,onRejected){
const self = this;
//给onResolved和onReject一个默认值
//成功的回调函数继续向下传递返回一个成功的value值
//失败的回调函数继续向下传递抛出失败的值
onResolved = typeof onResolved = 'function'? onResolved : value => value;
onRejected = typeof onRejected = 'function' ? onRejected : reason => {throw reason};
//返回一个新的Promise对象
return new Promise((resolve,reject) => {
//封装一个改变Promise状态的函数
function handle(callback){
/**
* 执行指定的回调函数
* 根据执行的结果改变return的promise的状态/数据
*/
/**
* 返回Promise的结果由onResolved/onRejected执行结果决定
* 1、抛异常,返回Promise的结果为失败,reason为异常
* 2、返回的是promise,返回的promise的结果就是这个结果
* 3、返回的不是promise对象,返回promise为成功,value就是返回值
*/
//首先捕获异常
try{
//获取promise对象返回的结果
const result = callback(self.data);
if(result instanceof Promise){ //如果返回的结果是Promise对象
result.then(resolve,rejecte);
}else{ //返回的不是Promise对象
resolve(result);
}
}catch(error){
rejected(error);
}
}
//状态的三种情况
//resolved 、 rejected 、 pending
if(self.status == 'resolved'){ //resolved状态
//立即执行成功的异步回调函数
setTimeout(()=>{
handle(onResolved);
})
}else if(self.status == 'rejected'){ //rejected状态
//立即执行失败的异步回调函数
setTimeout(()=>{
handle(onRejected);
})
}else{ //pending状态 保存回调函数到callbacks容器
self.callbacks.push({
//根据执行结果改变Promise状态
onResolved(){
handle(onResolved);
},
onRejected(){
handle(onRejected);
}
})
}
})
}
//3、Promise原型对象的catch()方法,指定失败的回调函数,返回一个新的Promise对象
Promise.prototype.catch = function(onResolved,onRejected){
}
//4、Promise函数对象resolve方法,返回指定结果的一个成功Promise,成功值为value
Promise.resolve = function(value){
}
//5、Promise函数对象reject方法,返回指定结果的一个失败Promise,失败值为reason
Promise.reject = function(reason){
}
//6、Promise函数对象的all方法,返回一个Promise,只有当所有的Promise都成功时才成功,否则失败
Promise.all = function(promises){
}
//7、Promise函数对象的race方法,返回一个Promise,其结构由第一个完成的Promise决定
Promise.race = function(Promises){
}
//8、向外暴露Promise函数
window.Promise = Promise;
})(window)
六、Promise的reject()、resolve()函数的实现
首先返回一个promise对象,resolve()函数返回一个成功或失败的promise,reject()返回一个失败的promise.。
/**
* 自定义promise函数模块:立即执行函数
*
*/
(function (window){
/**
* Promise构造函数
* excutor:执行器函数(同步执行)
*/
//将常用的变量存起来
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
function Promise (excutor){
const self = this;
self.status = PENDING;//给promise对象指定status属性,初始值为pending
self.data = undefined; //给promise对象指定一个用于存储结构数据的属性
self.callbacks = []; // 缓存回调函数 每个元素的结构:{onResolved(){} , onRejected() {}}
//两个用于改变promise状态的函数
function resolve(value){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== PENDING){
return;
}
//将状态改为resolved
self.status = RESOLVED;
//保存value数据
self.data = value;
//如果有待执行的callback函数,立即异步执行回调函数onResolved
if(self.callbacks.length>0){
setTimeout(()=>{ //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value);
});
})
}
}
function reject(reason){
//状态只能改一次,如果当前状态不是pending,直接结束
if(self.status !== PENDING){
return;
}
//将状态改为rejected
self.status = REJECTED;
//存储数据
self.data = reason;
//如果有待执行的callback函数,立即异步执行回调函数onRejected
if(self.callbacks.length>0){
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason);
})
})
}
}
//立即同步执行excutor
//需要捕获异常
try{
excutor(resolve,reject); //调用了执行器
}catch(error){ //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
/**
* Promise原型对象的then()方法
* 指定成功和失败的回调函数
* 返回一个新的promise对象
* 返回Promise的结果由onResolved/onRejected执行结果决定
*/
Promise.prototype.then = function(onResolved,onRejected){
//获取this
const self = this;
/**指定回调函数的默认值
* 必须是函数
* 成功的回调函数继续向下传递,返回一个value的
* 失败的回调函数继续向下传递,定义一个抛出reason的函数
* */
onResolved = typeof onResolved === 'function'? onResolved : value => value;
onRejected = typeof onRejected === 'function'? onRejected : reason => {throw reason};
//首先返回一个新的Promise对象
return new Promise((resolve,reject) => {
//封装一个函数 处理一个回调函数的调用,以及Promise状态的改变
function handle(callback){
/**
* 执行指定的回调函数
* 根据执行的结果改变return的promise的状态/数据
*/
/**
* 返回Promise的结果由onResolved/onRejected执行结果决定
* 1、抛异常,返回Promise的结果为失败,reason为异常
* 2、返回的是promise,返回的promise的结果就是这个结果
* 3、返回的不是promise对象,返回promise为成功,value就是返回值
*/
//首先捕获异常
try{
const result = callback(self.data);
if(result instanceof Promise){ //2、返回的是promise,返回的promise的结果就是这个结果
result.then(resolve,reject);
}else{//3、返回的不是promise对象,返回promise为成功,value就是返回值
resolve(result);
}
}catch(error){
reject(error);
}
}
//指定成功和失败的回调函数(需要保存或者调用)取决于onResolved/onRejected的状态所以我们需要写在new Promise里面。
//有三种状态 分别是:pending resolved rejected
if(self.status == RESOLVED){ //resolved状态
//成功状态执行回调函数
//立即异步执行成功的回调函数
setTimeout(()=>{
handle(onResolved);
})
}else if(self.status == REJECTED){ //rejected状态
//立即异步执行失败的回调函数
setTimeout(()=>{
handle(onRejected);
})
}else{ //pending状态
//将成功和失败的回调函数保存callbacks容器中缓存起来
self.callbacks.push({
//根据执行结果改变Promise状态
onResolved(value){
//在函数里面调用回调函数
handle(onResolved);
},
onRejected(reason){
handle(onRejected)
}
})
}
})
}
/**
* Promise原型对象的catch()方法
* 指定失败的回调函数
* 返回一个新的promise对象
*/
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
//resolve函数:内部定义成功时我们调用的函数 value=>{}
//reject函数:内部定义失败时我们调用的函数 reason=>{}
/**
* Promise函数对象resolve 方法
* 返回指定结果的一个成功的promise
* 成功的值为value
*/
Promise.resolve = function(value){
//返回一个成功/失败的Promise
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(resolve,reject);
}else{
resolve(value);
}
})
}
/**
* Promise函数对象的rejecte方法
* 返回一个指定reason的失败的promise
* 失败值为reason
*/
Promise.reject = function(reason){
//返回一个失败的promise
return new Promise((resolve,reject) => {
reject(reason);
})
}
/**
* Promise函数对象的all方法
* 返回一个peomise,只有当所有peomise都成功时才成功,否则失败
*/
Promise.all = function(promises){
}
/**
* Promise函数对象的race方法
* 返回一个promise。其结构由第一个完成的promise决定
*/
Promise.race = function(promises){
}
//向外暴露Promise函数
window.Promise = Promise;
})(window)
七、Promise的all方法、race方法的实现
1、Promise函数对象的all方法 , 返回一个peomise,只有当所有peomise都成功时才成功,否则失败。
2、Promise函数对象的race方法 ,返回一个promise。其结构由第一个完成的promise决定
/**
* 自定义promise函数模块:立即执行函数
*
*/
(function (window){
/**
* Promise构造函数
* excutor:执行器函数(同步执行)
*/
//将常用的变量存起来
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
function Promise (excutor){
const self = this;
self.status = PENDING;//给promise对象指定status属性,初始值为pending
self.data = undefined; //给promise对象指定一个用于存储结构数据的属性
self.callbacks = []; // 缓存回调函数 每个元素的结构:{onResolved(){} , onRejected() {}}
//两个用于改变promise状态的函数
function resolve(value){
//状态只能改一次,如果当前状态不是pending,直接结束 优化
if(self.status !== PENDING){
return;
}
//将状态改为resolved
self.status = RESOLVED;
//保存value数据
self.data = value;
//如果有待执行的callback函数,立即异步执行回调函数onResolved
if(self.callbacks.length>0){
setTimeout(()=>{ //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value);
});
})
}
}
function reject(reason){
//状态只能改一次,如果当前状态不是pending,直接结束
if(self.status !== PENDING){
return;
}
//将状态改为rejected
self.status = REJECTED;
//存储数据
self.data = reason;
//如果有待执行的callback函数,立即异步执行回调函数onRejected
if(self.callbacks.length>0){
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason);
})
})
}
}
//立即同步执行excutor
//需要捕获异常
try{
excutor(resolve,reject); //调用了执行器
}catch(error){ //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
/**
* Promise原型对象的then()方法
* 指定成功和失败的回调函数
* 返回一个新的promise对象
* 返回Promise的结果由onResolved/onRejected执行结果决定
*/
Promise.prototype.then = function(onResolved,onRejected){
//获取this
const self = this;
/**指定回调函数的默认值
* 必须是函数
* 成功的回调函数继续向下传递,返回一个value的
* 失败的回调函数继续向下传递,定义一个抛出reason的函数
* */
onResolved = typeof onResolved === 'function'? onResolved : value => value;
onRejected = typeof onRejected === 'function'? onRejected : reason => {throw reason};
//首先返回一个新的Promise对象
return new Promise((resolve,reject) => {
//封装一个函数 处理一个回调函数的调用,以及Promise状态的改变
function handle(callback){
/**
* 执行指定的回调函数
* 根据执行的结果改变return的promise的状态/数据
*/
/**
* 返回Promise的结果由onResolved/onRejected执行结果决定
* 1、抛异常,返回Promise的结果为失败,reason为异常
* 2、返回的是promise,返回的promise的结果就是这个结果
* 3、返回的不是promise对象,返回promise为成功,value就是返回值
*/
//首先捕获异常
try{
const result = callback(self.data);
if(result instanceof Promise){ //2、返回的是promise,返回的promise的结果就是这个结果
result.then(resolve,reject);
}else{//3、返回的不是promise对象,返回promise为成功,value就是返回值
resolve(result);
}
}catch(error){
reject(error);
}
}
//指定成功和失败的回调函数(需要保存或者调用)取决于onResolved/onRejected的状态所以我们需要写在new Promise里面。
//有三种状态 分别是:pending resolved rejected
if(self.status == RESOLVED){ //resolved状态
//成功状态执行回调函数
//立即异步执行成功的回调函数
setTimeout(()=>{
handle(onResolved);
})
}else if(self.status == REJECTED){ //rejected状态
//立即异步执行失败的回调函数
setTimeout(()=>{
handle(onRejected);
})
}else{ //pending状态
//将成功和失败的回调函数保存callbacks容器中缓存起来
self.callbacks.push({
//根据执行结果改变Promise状态
onResolved(value){
//在函数里面调用回调函数
handle(onResolved);
},
onRejected(reason){
handle(onRejected)
}
})
}
})
}
/**
* Promise原型对象的catch()方法
* 指定失败的回调函数
* 返回一个新的promise对象
*/
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
//resolve函数:内部定义成功时我们调用的函数 value=>{}
//reject函数:内部定义失败时我们调用的函数 reason=>{}
/**
* Promise函数对象resolve 方法
* 返回指定结果的一个成功的promise
* 成功的值为value
*/
Promise.resolve = function(value){
//返回一个成功/失败的Promise
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(resolve,reject);
}else{
resolve(value);
}
})
}
/**
* Promise函数对象的rejecte方法
* 返回一个指定reason的失败的promise
* 失败值为reason
*/
Promise.reject = function(reason){
//返回一个失败的promise
return new Promise((resolve,reject) => {
reject(reason);
})
}
/**
* Promise函数对象的all方法
* 返回一个peomise,只有当所有peomise都成功时才成功,否则失败
*/
Promise.all = function(promises){
//定义一个变量来保存每次进去成功中执行的次数
let countResolve = 0;
//用来保存所有成功value的数组
const values = new Array(promises.length);
//首先返回的是一个Promise对象
return new Promise((resolve,reject) => {
//遍历promises获取的每一个peomise的结果
//若p里面不是promise对象,那么需要用 Promise.resolve(p)替换p
promises.forEach((p,index) => {
Promise.resolve(p).then(
value => {
countResolve ++;
values[index] = value;
//如果全部成功了,将return的promise改为成功
if(countResolve === promises.length){
resolve(values);
}
},
reason => {
reject(reason);
}
)
})
})
}
/**
* Promise函数对象的race方法
* 返回一个promise。其结构由第一个完成的promise决定
*/
Promise.race = function(promises){
//返回一个Promise对象
return new Promise((resolve,reject) => {
promises.forEach((p,index) => {
//若p里面不是promise对象,那么需要用 Promise.resolve(p)替换p
Promise.resolve(p).then(
value => {
//一旦有成功了,将return的Promise变为成功
resolve(value);
},
reason => {
//一旦有失败,将return 的Promise变为失败
reject(reason);
}
)
})
})
}
//向外暴露Promise函数
window.Promise = Promise;
})(window)