promise 就是ES6新语法中 新增解决异步处理的一种方法 解决异步处理 并返回成功与失败的数据
其他方法 async await、回调函数、generator yleid
promise 中的状态
起始状态为 pending
成功状态为 resolved
失败状态为 rejected
注意: promise 只能从起始状态改为成功或失败的某一种状态 且为单向改变（不可逆）
无论成功还是失败，都会有一个结果数据
成功为对应的成功数据返回值
失败为对应的失败数据返回值
resolve resolved then onResolved()/onRejected()
new Promise 返回新的promise
reject rejected finall/catch onRejected()
promise的优势
1. promise指定回调函数更加灵活
普通回调: 必须在异步函数执行前 指定回调函数
promise: 异步函数执行前/中/后 都可以指定
promise 的状态通过回调函数的方式确定 当存在链式调用时 then方法由上一级的返回结果决定
new Promise((resolve,reject)=>{
resolve(1);
})
.then(
(res)=>{
return Promise.reject(2)
},
(err)=>{}
).then(
(res)=>{},
(err)=>{
console.log(2);
}
)
promise 对reject 返回的数据 .then中没有对应的回调函数接收 就默认为 err => throw err 一直向下抛 直至遇到处理的函数
promise 对于 .then中有 能处理的 reject 的回调函数 那么就执行该回调 若后面还有.then 方法 则执行成功方法
promise 中 .then 或 .catch 接收的状态为 reject 或者 resolve 当为pending状态时 .then .catch ... 都不会被调用
使用 return new Promise(()=>{}) 状态为 pending 中断后续执行
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// 定义Promise构造函数
class Promise{
//actuator 是一个执行器 包含了 resolve reject
constructor(actuator){
//起始状态为pending
this.status = PENDING;
//保存传输的数据
this.data = undefined;
//保存回调函数 保存数据为 [{onResolved1,onRejected1},{onResolved2,onRejected2}]
this.callback = [];
//防止this发生改变 使用self 保存
const self = this;
// 定义成功方法
function resolve(params) {
// 判断当前的状态是否为pending
if(self.status!==PENDING){
return;
}
// 保存状态以及传递数据
self.status = RESOLVED;
self.data = params;
// 判断回调函数数组中是否存在待执行的数据
if(self.callback.length > 0){
// 由于所有的回调函数都是异步执行的 因此使用setTimeout 进行异步执行
setTimeout(()=>{
// 遍历数组 执行对应的成功回调函数
self.callback.forEach(item =>{
item.onResolved();
})
},0)
}
}
// 失败方法 与 成功方法类似
function reject(params) {
if(self.status!==PENDING){
return;
}
self.status = REJECTED;
self.data = params;
if(self.callback.length > 0){
setTimeout(()=>{
self.callback.forEach(item =>{
item.onRejected();
})
},0)
}
}
// 判断执行器是否存在异常 如果存在异常 则执行错误方法
try{
actuator(resolve,reject)
}catch (e) {
reject(e)
}
}
// then方法为核心方法 传递两个回调函数 成功、失败
then(onResolved,onRejected){
// 判断这两个函数 都否为函数 如果不是则 使其为一个函数
onResolved = typeof onResolved === "function" ? onResolved : value => value;
onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason};
// 保存this
const self = this;
// 返回一个新的promise
return new Promise((resolve,reject)=>{
// handle函数 主要是判断then方法传递的回调函数执行的返回值的状态
// 判断是promise 还是 普通值 还是错误 且让新的promise的状态为返回值的状态
function handle(cb) {
try{
// 执行回调获取返回值
const result = cb(self.data);
// 修改新的promise状态
if(result instanceof Promise){
result.then(resolve,reject);
}else{
resolve(result);
}
}catch (e) {
reject(e);
}
}
// 判断当前的promise的状态 使用handle函数 处理对应的then方法的回调函数
if(self.status === PENDING){ // 等待状态
self.callback.push({
// 由于在promise中的resolve、reject函数中会执行onResolve与onRejected 但是 新的promise没有办法通过promise中的执行结果而改变状态 因此 在then中改变对应的状态
onResolved(){
handle(onResolved);
},
onRejected(){
handle(onRejected);
}
});
}else if(self.status === RESOLVED){ // 成功状态
setTimeout(()=>{
handle(onResolved);
},0)
}else{ // 失败状态
setTimeout(()=>{
handle(onRejected);
},0)
}
})
}
}
new Promise((resolve,reject)=>{
resolve(0);
}).then(value => {
console.log(value);
return new Promise((resolve,reject)=>{
// resolve(1);
reject(5);
})
},err=>console.log(err)).then(value=>console.log(value),err=>console.log(err));
/* 结果为
0
5
*/
网友评论