promise
在开发中，经常需要用到promise，promise具有很多特性，这一次将对promise特性进行总结，并从零写一个promise。
步骤一
- Promise特点
- 1，创建时需要传递一个函数，否则会报错
- 2，会给传入的函数设置两个回调函数
- 3，刚创建的Promise对象状态是pending
class MyPromise {
constructor(handle) {
// 3，刚创建的Promise对象状态是pending
this.status = "pending";
// 1，创建时需要传递一个函数，否则会报错
if (!this._isFunction(handle)) {
throw new Error("请传入一个函数");
}
// 2，会给传入的函数设置两个回调函数
handle(this._resolve.bind(this), this._reject.bind(this))
}
_resolve() {
}
_reject() {
}
_isFunction(fn) {
return typeof fn === "function";
}
}步骤二
- Promise特点
- 4，状态一旦发生改变就不可再次改变
- 5，可以通过then来监听状态的改变
- 5.1，如果创建监听时，状态已经改变，立即执行监听回调
- 5.2，如果创建监听时，状态未改变，会等状态改变后执行
- 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
// 定义常量保存对象的状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class MyPromise {
constructor(handle) {
// 3，刚创建的Promise对象状态是pending
this.status = PENDING;
// 成功回调的值
this.value = undefined;
// 失败回调的值
this.reason = undefined;
// 注册的成功回调
this.onResolvedCallbacks = [];
// 注册的失败回调
this.onRejectedCallbacks = [];
// 1，创建时需要传递一个函数，否则会报错
if (!this._isFunction(handle)) {
throw new Error("请传入一个函数");
}
// 2，会给传入的函数设置两个回调函数
handle(this._resolve.bind(this), this._reject.bind(this))
}
_resolve(value) {
// 4，状态一旦发生改变就不可再次改变
if (this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
// 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
this.onResolvedCallbacks.forEach(fn => fn(this.value));
}
}
_reject(reason) {
// 4，状态一旦发生改变就不可再次改变
if (this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
// 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
this.onRejectedCallbacks.forEach(fn => fn(this.reason));
}
}
then(onResolved, onRejected) {
// 判断有没有传入成功的回调
if (this._isFunction(onResolved)) {
// 5.1，如果创建监听时，状态已经改变，立即执行监听回调
if (this.status === FULFILLED) {
onResolved(this.value);
}
}
// 判断有没有传入失败的回调
if (this._isFunction(onRejected)) {
// 5.1，如果创建监听时，状态已经改变，立即执行监听回调
if (this.status === REJECTED) {
onRejected(this.reason);
}
}
// 5.2，如果创建监听时，状态未改变，会等状态改变后执行
if (this.status === PENDING) {
if (this._isFunction(onResolved)) {
this.onResolvedCallbacks.push(onResolved);
}
if (this._isFunction(onRejected)) {
this.onRejectedCallbacks.push(onRejected);
}
}
}
_isFunction(fn) {
return typeof fn === "function";
}
}详解then方法
- 接收两个参数：成功回调，失败回调
- 如果promise失败了，但是没有注册失败监听，就会报错
- then方法每次执行完毕都会返回一个新的Promise对象
- 如果then方法只有成功回调
- 则它返回的promise的状态会继承当前promise的状态。
- 如果当前promise的状态为成功：新promise的值为当前then的成功回调的返回值。
- 如果当前promise的状态为失败：新的promise没有失败监听，则会报错
- 如果then方法同时包含成功回调、失败回调
- 则它返回的promise的状态都为成功，且值为成功或者失败回调的返回值。
- 如果then方法只有成功回调
- 回调函数的返回值
- 如果then方法的成功/失败回调返回的是promise对象
- 则then方法返回的新的promise对象的状态由新promise的内部决定。
- 且值为新promise的内resolve/reject函数传递的参数。
- 如果then方法的成功/失败回调返回的是普通数据类型
- 则then方法返回的新的promise对象的状态都为成功。
- 且值为成功/失败回调的返回值，即都会传递给新的promise对象成功的回调。
- 如果then方法的成功/失败回调没有返回值
- 同返回普通数据类型
- 如果then方法的成功/失败回调返回的是promise对象
- 失败回调函数
- 可以捕获上一个promise对象的then方法中成功回调函数执行时的异常
then(onResolved, onRejected) {
return new MyPromise((nextResolve, nextReject) => {
// 1.判断有没有传入成功的回调
if (this._isFunction(onResolved)) {
// 2.判断当前的状态是否是成功状态
if (this.status === FULFILLED) {
try {
// 拿到上一个promise成功回调执行的结果
let result = onResolved(this.value);
// console.log("result", result);
// 判断执行的结果是否是一个promise对象
if (result instanceof MyPromise) {
result.then(nextResolve, nextReject);
} else {
// 将上一个promise成功回调执行的结果传递给下一个promise成功的回调
nextResolve(result);
}
} catch (e) {
nextReject(e);
}
}
}
// 1.判断有没有传入失败的回调
// if(this._isFunction(onRejected)){
try {
// 2.判断当前的状态是否是失败状态
if (this.status === REJECTED) {
let result = onRejected(this.reason);
if (result instanceof MyPromise) {
result.then(nextResolve, nextReject);
} else {
nextResolve(result);
}
}
} catch (e) {
nextReject(e);
}
// }
// 2.判断当前的状态是否是默认状态
if (this.status === PENDING) {
if (this._isFunction(onResolved)) {
// this.onResolvedCallback = onResolved;
this.onResolvedCallbacks.push(() => {
try {
let result = onResolved(this.value);
if (result instanceof MyPromise) {
result.then(nextResolve, nextReject);
} else {
nextResolve(result);
}
} catch (e) {
nextReject(e);
}
});
}
// if(this._isFunction(onRejected)){
// this.onRejectedCallback = onRejected;
this.onRejectedCallbacks.push(() => {
try {
let result = onRejected(this.reason);
if (result instanceof MyPromise) {
result.then(nextResolve, nextReject);
} else {
nextResolve(result);
nextReject();
}
} catch (e) {
nextReject(e);
}
});
// }
}
});
}详解catch方法
- 其实是then方法的失败回调函数的语法糖
- 如果需要同时使用then和catch方法，必须使用链式编程，不然会报错
- 可以捕获上一个promise对象的then方法中成功回调函数执行时的异常
catch(onRejected) {
return this.then(undefined, onRejected);
}为啥使用catch时最好使用链式编程
- 因为then方法只有成功回调，所以p2的状态会继承p1
- 又因为p2的状态为失败，且没有对p2进行失败监听，所以报错
let p1 = new Promise(function (resolve, reject) {
// resolve();
reject();
});
let p2 = p1.then(function () {
console.log("成功");
});
p1.catch(function () {
console.log("失败1");
});Promise.all()
- Promise.all(params)特点
- 参数为一个数组，且数组元素为promise类型数据
- 返回值为一个promise，
- 如果所有promise都执行成功
- 返回值为所有promise都成功时返回的结果的集合
- 如果有一个promise执行失败了，则返回失败的promise
- 如果所有promise都执行成功
static all(list){
return new MyPromise(function (resolve, reject) {
let arr = [];
let count = 0;
for(let i = 0; i < list.length; i ){
let p = list[i];
p.then(function (value) {
// arr.push(value); 注意不要这样写，会导致结果顺序不对
arr[i] = value
count ;
if(list.length === count){
resolve(arr);
}
}).catch(function (e) {
reject(e);
});
}
});
}Promise.race()
- Promise.race(params)特点
- 参数为一个数组，且数组元素为promise类型数据
- 返回值为一个promise，且返回值为第一个成功或者失败的promise的值
static race(list){
return new MyPromise(function (resolve, reject) {
for(let p of list){
p.then(function (value) {
resolve(value);
}).catch(function (e) {
reject(e);
});
}
})
}
