Promise从入门到精通
概念
Promise是ES6引入的进行异步编程的新的解决方案
备注：旧计划是单纯的应用回调函数
- 从语法上来说：它就是一个构造函数，
- 从性能上来说：能够封装异步的工作，并且能够对后果进行解决
Promise最大的益处：能够解决回调天堂的问题，并且它在指定回调和错误处理这一块更加的灵便与不便
回调天堂的典型情景：
异步编程有哪些？
答：fs文件操作、数据库操作、AJAX、定时器等等
为什么要应用Promise？
-
指定回调函数的形式更加灵便
旧的形式：必须在启动异步工作前指定·promise：启动异步工作 => 返回promise对象 => 给promise对象绑定回调函数（甚至能够在异步工作完结后指定多个回调）
-
反对链式调用，能够解决回调天堂问题
回调天堂的毛病：1）不便于浏览；2）不便于异样解决
Promise的根本流程
promise的状态扭转
状态指的是promise实例中的一个属性：【PromiseState】
pending 未决定的
fulfilled 胜利
rejected 失败
1. pending => fulfilled
2. pending => rejected
promise对象的状态只有这两种扭转，1个promise对象的状态只能扭转一次，
不可能由fulfilled转rejected
也不可能由rejected转fulfilled
promise对象后果值属性介绍
实例对象中另一个属性：【PromiseResult】
保留的是胜利/失败的后果
resolve能够批改PromiseResult的值
rejected能够批改PromiseResult的值
如何应用Promise？
API
1.Promise构造函数：Promise(exector){}
1)exector函数：称为执行器函数 (resolve,reject)=>{}
2)resolve函数：是Promise外部定义的，胜利时咱们调用resolve函数
3)reject函数：是Promise外部定义的，失败时咱们调用reject函数
阐明：exector会在Promise外部立刻同步调用，异步操作在执行器中执行
2.Promise.prototype.then办法：(onResolved,onRejected)=>{}
1)onResolved函数：指定胜利的回调函数 value=>{}
2)onRejected函数：指定失败的回调函数 reason=>{}
阐明：指定用于失去胜利value的胜利回调和用于失去失败reason的失败回调，返回一个新的promise对象
3.Promise.prototype.catch办法：(onRejected)=>{}
onRejected函数：指定失败的回调函数 reason=>{}
阐明：then()的语法糖，相当于then(undefined,onRejected)
4.Promise.resolve办法 (value)=>{}
1)value:胜利的数据或promise对象
阐明：返回一个胜利/失败的promise对象
作用：为了疾速失去一个promise对象，而且可能封装1个值，将这个值转化为promise对象
如果传入的参数为非promise类型的对象，则返回的后果为胜利的promise对象
如果传入的参数为promise对象，则参数的后果决定了resolve的后果
5.Promise.reject办法：(reason)=>{}
作用：疾速返回一个失败的promise对象
返回的后果永远都是失败的promise对象
6.Promise.all办法：(promises数组)=>{}
参数：蕴含n个promise的数组
阐明：返回一个新的promise对象，只有所有的promise都胜利才胜利，只有有一个失败就间接失败
7.Promise.race办法：(promises数组)=>{}
race有赛跑的意思
参数：蕴含n个promise的数组
阐明：返回一个新的promise对象，第一个扭转状态的promise就是最终的后果状态
promise的几个关键问题
1. 如何扭转promise的状态?
(1) resolve(value): 如果以后是pending就会变为fulfilled
(2) reject(reason): 如果以后是pending就会变为rejected
(3) 抛出异样: 如果以后是pending就会变为rejected
2. 一个promise指定多个胜利/失败回调函数, 都会调用吗?
当promise扭转为对应状态时都会调用
3. 扭转promise状态和指定回调函数谁先谁后?
(1) 都有可能, 失常状况下是先指定回调再扭转状态, 但也能够先改状态再指定回调
(2) 如何先改状态再指定回调?
① 在执行器中间接调用resolve()/reject()
② 提早更长时间才调用then()
(3) 什么时候能力失去数据?
① 如果先指定的回调, 那当状态产生扭转时, 回调函数就会调用, 失去数据
② 如果先扭转的状态, 那当指定回调时, 回调函数就会调用, 失去数据
4. promise.then()返回的新promise的后果状态由什么决定?
(1) 简略表白: 由then()指定的回调函数执行的后果决定
(2) 具体表白:
① 如果抛出异样, 新promise变为rejected, reason为抛出的异样
② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
③ 如果返回的是另一个新promise, 此promise的后果就会成为新promise的后果
5. promise如何串连多个操作工作?
(1) promise的then()返回一个新的promise, 能够开成then()的链式调用
(2) 通过then的链式调用串连多个同步/异步工作
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('ok');
},1000);
});
p.then(v=>{
return new Promise((resolve,reject)=>{
resolve('success');
});
}).then(v=>{
console.log(v);
}).then(v=>{
console.log(v);
}) 6. promise异样传透?
(1) 当应用promise的then链式调用时, 能够在最初指定失败的回调,
(2) 后面任何操作出了异样, 都会传到最初失败的回调中解决
let p = new Promise((resolve,reject)=>{
reject('err');
});
p.then(v=>{
console.log(111);
}).then(v=>{
console.log(222);
}).then(v=>{
console.log(333);
}).catch(r=>{
console.log(r);
}); 7. 中断promise链?
(1) 当应用promise的then链式调用时, 在两头中断, 不再调用前面的回调函数
(2) 方法: 在回调函数中返回一个pendding状态的promise对象
代码展现
//申明函数 执行器 『同步回调』
function Promise(executor) {
//设置实例对象的属性
this.PromiseState = 'pending';
this.PromiseResult = undefined;
this.callbacks = [];
//申明函数
const success = (value) => {
if (this.PromiseState !== 'pending') return;
//批改状态为胜利 PromiseState
this.PromiseState = 'fulfilled';
//设置胜利的后果值 PromiseResult
this.PromiseResult = value;
//调用回调
if (this.callbacks.length > 0) {
this.callbacks.forEach(cbObj => {
//执行胜利的回调
cbObj.ok();
})
}
}
const fail = (reason) => {
if (this.PromiseState !== 'pending') return;
//批改状态为失败 PromiseState
this.PromiseState = 'rejected';
//设置胜利的后果值 PromiseResult
this.PromiseResult = reason;
//调用回调
if (this.callbacks.length > 0) {
this.callbacks.forEach(cbObj => {
//执行胜利的回调
cbObj.ng();
})
}
}
try {
//调用执行器函数
executor(success, fail);
} catch (e) {
//调用 fail 函数
fail(e);
}
}
Promise.prototype.then = function (onFulfilled, onRejected) {
//判断 异样穿透
if(typeof onRejected !== 'function'){
onRejected = reason => {throw reason};
}
//值传递
if(typeof onFulfilled !== 'function'){
onFulfilled = value => value;
}
return new Promise((resolve, reject) => {
//封装函数简化代码
let callback = (type) => {
try {
let res = type(this.PromiseResult);
//判断
if (res instanceof Promise) {
res.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
resolve(res);
}
} catch (e) {
reject(e);
}
}
//判断 胜利
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onFulfilled);//
})
}
//失败
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected);
})
}
//pending
if (this.PromiseState === 'pending') {
//保留回调
this.callbacks.push({
ok: function () {
//胜利
callback(onFulfilled);
},
ng: function () {
callback(onRejected);
}
})
}
});
}
Promise.prototype.catch = function(onRejected){
return this.then(undefined, onRejected);
}
Promise.resolve = function(value){
return new Promise((resolve,reject) => {
//判断
if(value instanceof Promise){
//value.then(resolve, reject); 这行代码和上面5行代码性能一样
value.then(v=>{
resolve(v);
}, r => {
reject(r);
});
}else{
resolve(value);
}
})
}
Promise.reject = function(reason){
return new Promise((resolve, reject) => {
reject(reason);
})
}
Promise.all = function (promiseArr) {
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for (let i = 0; i < promiseArr.length; i++) {
promiseArr[i].then(v => {
count++;
arr[i] = v;
if (count === promiseArr.length) {
resolve(arr);
}
}, r => {
reject(r);
});
}
});
}
Promise.race = function (promiseArr) {
return new Promise((resolve, reject) => {
promiseArr.forEach(item => {
item.then(v => {
resolve(v);
}, r => {
reject(r);
});
});
});
}
面试题1：
let p = new Promise((resolve, reject) => {
reject("error");
});
p.then(v => {
console.log(v);
}).then(v => {
console.log(v);
}, r => {
console.log(r); // error
}).then(v => {
console.log(v); // undefined
}, r => {
console.warn(r);
});
发表回复