文章目录
-
- 一、Promise 介绍
- 二、promise 源码实现
一、Promise 介绍
定义
- Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象；
- Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。
特点
- Promise 对象代表一个异步操作，对象的状态不受外界影响，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）；只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态；
- 一旦状态改变就不会再变，Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled，从 pending 变为 rejected；如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果；这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的；
- 构造函数 Promise 必须接收一个函数（handle）作为参数，函数又包含 resolve 和 reject ；
- then 、catch 支持链式调用；
缺点
- Promise 无法取消：一旦新建就会执行，无法中途取消；
- 如果不设置回调函数，Promise 内部抛出的错误不会反应到外部；
- 当处于 pendding 状态时，无法知道目前进展到哪一个阶段；
场景
- 有效的解决 js 异步回调地狱问题；
- 将业务逻辑与数据处理分隔开使代码更优雅，方便阅读，更有利于代码维护；
基本用法
let p = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('成功！');
},10)
}).then(res=>{
console.log('成功！')
})
二、promise 源码实现
// 定义三种状态
const REJECTED = 'REJECTED';
const FULFILLED = 'FULFILLED';
const PENDING = 'PENDING';
//判断一个变量是否是 Promise 的函数：1. 是否是对象并且不是 null 2. 是否有 then 属性并且 then 是一个方法
function isPromise(val) {
if (typeof val === 'object' && val !== null || typeof val === 'function') {
return typeof val.then === 'function';
}
return false;
}
//处理 x 的值，如果是普通值直接返回，如果是 promise 则返回 x.then 执行的结果
const resolvePromise = (promise2, x) => {
const { resolve, reject } = promise2;
// 如果 new 出来的 Promise2 和 x 是同一个，直接报错
if (promise2 === x) return reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
// 先判断是不是对象或者函数
if (typeof x === 'object' && x !== null || typeof x === 'function') {
// 调用了成功就不能失败，调用的失败就不能成功。不能多次调用成功或者失败
let called;
try {
// 内部可能抛出错误
const then = x.then;
// 如果 x.then 不是函数就说明是一个普通值，直接返回 x
if (typeof then !== 'function') {
resolve(x);
} else {
// 利用.call将this指向 x, 防止x.then()报错
then.call(x, (res) => {
if (called) return;
called = true;
// res 可能是一个 promise ，递归调用resolvePromise，直到解析出的值是普通值
resolvePromise(promise2, res);
}, (err) => {
if (called) return;
called = true;
// 直接调用 promise的 reject 作为失败的结果，并向下传递
reject(err);
});
}
} catch(err) {
if (called) return;
called = true;
reject(err);
}
} else {
resolve(x);
}
};
//promise 类
class Promise {
constructor(executor) {
this.status = PENDING; // Promise 的状态
this.value = undefined; // 成功后的值
this.reason = undefined; // 失败后的值
this.onResolvedCallbacks = []; // 成功回调函数集合
this.onRejectedCallbacks = []; // 失败回调函数集合
// Promise 内部提供的 resolve 方法，让 Promise 的状态变成成功态，并让成功回调执行
const resolve = (value) => {
//如果value是Promise则返回value.then的执行结果
if (value instanceof Promise) {
return value.then(resolve, reject);
}
if (this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn());
}
};
// Promise 内部提供的 reject，让 Promise 的状态变成失败态，并让失败回调执行
const reject = reason => {
if (this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn());
}
};
// try + catch 只能捕获同步异常
try {
//执行入参函数
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
// 比如.then().then().then(() => {}); 这种调用，对可选参数的处理，透传
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
// 判断onRejected是否存在或者是否是函数，如果不是函数或者不存在，我们让它等于一个函数，并且在函数内继续将err向下抛出
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
const promise2 = new Promise((resolve, reject) => {
// 同步：成功
if(this.status === FULFILLED) {
setTimeout(() => {
promise2.resolve = resolve;
promise2.reject = reject;
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x);
} catch (err) {
reject(err);
}
}, 0);
}
// 同步：失败
if (this.status === REJECTED) {
setTimeout(() => {
promise2.resolve = resolve;
promise2.reject = reject;
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x);
} catch (err) {
reject(err);
}
}, 0);
}
// 异步
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
setTimeout(() => { // 这里需要加上，不加上跑测试跑不通
promise2.resolve = resolve;
promise2.reject = reject;
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x);
} catch (err) {
reject(err);
}
});
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
promise2.resolve = resolve;
promise2.reject = reject;
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x);
} catch (err) {
reject(err);
}
});
});
}
});
return promise2;
}
// Promise 中的 catch 指代的就是 then 没有成功回调的一个别名而已
catch(errCallback) {
return this.then(null, errCallback);
}
}
// 无论如何都会执行，把上一个 then 的结果向下传递，如果 finally 中返回了一个 Promise 会等待这个 Promise 执行完成后继续执行
Promise.prototype.finally = function(callback) {
return this.then(val => {
return Promise.resolve(callback()).then(() => val);
}, (err) => {
return Promise.resolve(callback()).then(() => { throw err; });
});
};
// npm install promises-aplus-tests -g
// promises-aplus-tests promise.js
// 测试自己写的 Promise 是否符合规范的包
Promise.deferred = () => {
const dfd = {};
dfd.promise = new Promise((resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd;
};
//Promise.resolve 他会等待里面的 Promise 执行成功
Promise.resolve = val => {
return new Promise((resolve) => {
resolve(val);
});
};
//Promise.reject 不会等待参数中的 Promise 执行完毕
Promise.reject = () => {
return new Promise((_, reject) => {
reject(val);
});
};
//all 方法表示等待所有的 Promise 全部成功后才会执行回调，如果有一个 Promise 失败则 Promise 就失败了
Promise.all = promises => {
return new Promise((resolve, reject) => {
//存放结果
const res = [];
//计数，当count 等于 length的时候就resolve
let count = 0;
const resolveRes = (index, data) => {
//将执行结果缓存在res中
res[index] = data;
//所有子项执行完毕之后，执行resolve 抛出所有的执行结果
if (++count === promises.length) {
resolve(res);
}
};
//循环遍历每一个参数的每一项
for(let i = 0; i < promises.length; i++) {
const current = promises[i];
//如果当前项是Promise，则返回 then 的结果
if (isPromise(current)) {
current.then((data) => {
resolveRes(i, data);
}, (err) => {
reject(err);
});
} else {
resolveRes(i, current);
}
}
});
}
//race谁是第一个完成的，就用他的结果，如果是失败这个 Promise 就失败，如果第一个是成功就是成功
Promise.race = (promises) => {
return new Promise((resolve, reject) => {
for(let i = 0; i < promises.length; i++) {
let current = promises[i];
//如果是一个 promise 继续执行 then
if (isPromise(current)) {
current.then(resolve, reject);
} else {
//是普通值则直接 resolve 返回，并终止循环
resolve(current);
break;
}
}
});
}
// 专门给 node 的 api 做的 promisify 方法，如 fs.readFile
Promise.promisify = fn => {
return (...arg) => {
return new Promise((resolve, reject) => {
fn(...arg, (err, data) => {
if (err) reject(err);
resolve(data);
});
});
}
};
module.exports = Promise;
1、Promise 有三个状态：pending、fulfilled，rejected；pending 代表等待状态，也是初始状态；fulfilld 代表成功态；rejected 代表失败态；
2、Promise 构造函数内部提供两个方法： resolve 方法，如果 value 是 Promise 则返回 value.then 的返回值；如果不是 Promise ，修改状态为 fulfilled 并执行成功回调函数；reject 方法修改状态为 rejected 并执行失败回调函数；状态一旦修改不可逆；
3、每一个 Promise 都有一个 then 方法，Promise 的 then 方法返回一个 Promise ，这就决定了 then 方法的链式调用：
then 方法如果返回一个普通值则直接将这个值传递给下一个 then；
then 方法如果返回一个 Promise 对象，则将 Promise 对象执行结果返回并传递给下一个 then；
resolvePromise 方法主要是处理 x 的值，如果是普通值直接返回，如果是 Promise 则返回 x.then 执行的结果；
4、Promise.prototype.then 方法，接收两个参数，第一个是 resolve （成功）回调，第二个是 reject （失败）回调；then 源码针对不同的状态进行处理：同步（成功、失败）、异步（pending）操作；
同步：直接借助 setTimeout 来执行相关成功、失败的回调函数；
异步：也是借助 setTimeout 来执行相关成功、失败的回调函数，但是它不是立即执行的，而是将这些回调函数分别存储在 onResolvedCallbacks、onRejectedCallbacks 数组中进行订阅，在需要的时候执行；
5、Promise.prototype.catch 方法：和 then 的 reject 回调是一样的，支持链式调用；
6、Promise.prototype.finally 方法：就是一个 then 方法，返回 Promise.resolve 回调，作用是把上一个 then 的结果向下传递；
7、Promise.resolve、Promise.reject 方法：返回一个新的 Promise，新 Promise 中返回 Promise 里面静态的 resolve 和 reject 方法；
8、Promise.all 方法：
只有所有的 Promise 都成功了，才会执行 resolve 并返回是所有成功的返回值数组，状态为成功状态；
如果有一个 Promise 失败了，则会直接执行 reject 返回失败的返回值，状态为失败状态；
有多个 Promise 失败，则返回第一个失败的返回值；
9、Promise.race 方法：
谁第一个完成就返回谁的结果，如果第一个是失败这个 Promise 就失败，如果第一个是成功就是成功；
还有两个方法我们基本用不到，这里就不介绍了。