promise
Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。每一个异步任务返回一个Promise对象，该对象有一个then方法，返回一个新的promise，实现链式调用。
优点
- 解决回调地狱
- 通过其中的then方法实现链式调用
- 解决try/catch问题
- 如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。
let p = new Promise((resolve,reject)=>{
resolve('成功');
}) ;
p.then(data=>{
console.log(data) ;
return("又成功了") ;
}).then(data=>{
console.log(data) ;
throw new Error('失败测试') ;
}).catch((err)=>{
console.log(err) ;
})
//输出结果：成功
//又成功了
//Error: aaa
复制代码缺点
- 无法取消Promise,一旦新建就会执行,不可取消
- 其次,若不设置回调函数,Promise内部抛出的错误不会反馈到外部
- 最后,处于Pending(进行中)状态时,无法得知目前发展阶段,即刚开始还是即将完成 若某些事件不断反复发生,一般来说,使用stream模式比不熟Promise要更好
三种状态，就是标志位，从初始可以到成功或失败，且只能更改这一次，报错走失败。
- Pending:初始化状态
- Fulfilled:成功态
- Rejected:失败态
其他用法
Promise.prototype.then();
Promise.prototype.catch();
Promise.all();
Promise.race();
Promise.resolve();
Promise.reject();
复制代码手动实现一个Promise。
说一千道一万，promise最主要的就是自己实现一个promise。 如果是实现polyfill,应该把箭头函数转换成普通函数，同时注意this指向问题。
此为完整的Promise实现
//将链式调用返回的值单独写一个方法resolvePromise()。
//方法中传入四个参数，分别是p2,x,resolve,reject。
//p2指的是上一次返回的promise，x表示运行promise返回的结果，resolve和reject是p2的方法
function resolvePromise(promise2, x, resolve, reject) {
//判断x是不是promise,不能自己等待自己完成
if (promise2 === x) {
return reject(new TypeError('循环引用'));
};
// 1、x是除了null以外的对象或者函数
if (x != null && (typeof x === 'object' || typeof x === 'function')) {
let called; //防止成功后调用失败
try { //防止取then是出现异常 object.defineProperty
let then = x.then; //取x的then方法 {then:{}}
if (typeof then === 'function') { //如果then是函数就认为他是promise
//call第一个参数是this，后面的是成功的回调和失败的回调
then.call(x, y => { //如果Y是promise就继续递归promise
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject)
}, r => { //只要失败了就失败了
if (called) return;
called = true;
reject(r);
});
} else { //then是一个普通对象，就直接成功即可
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e)
}
} else { //x若是普通值，直接作为下个then成功的参数
resolve(x)
}
}
class Promise {
constructor(executor) {
//默认状态是等待状态
this.status = 'panding';
this.value = undefined;
this.reason = undefined;
//存放成功的回调
this.onResolvedCallbacks = [];
//存放失败的回调
this.onRejectedCallbacks = [];
let resolve = (data) => { //this指的是实例
if (this.status === 'pending') {
this.value = data;
this.status = "resolved";
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if (this.status === 'pending') {
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try { //执行时可能会发生异常
executor(resolve, reject);
} catch (e) {
reject(e); //promise失败了
}
}
then(onFuiFilled, onRejected) {
//防止值的穿透
onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected : err => {
throw err;
} //抛出的得是一个错误对象
let promise2; //作为下一次then方法的promise
if (this.status === 'resolved') {
promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
//成功的逻辑 失败的逻辑
let x = onFuiFilled(this.value);
//看x是不是promise 如果是promise取他的结果 作为promise2成功的的结果
//如果返回一个普通值，作为promise2成功的结果
//resolvePromise可以解析x和promise2之间的关系
//在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0)
});
}
if (this.status === 'rejected') {
promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
//在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0)
});
}
//当前既没有完成也没有失败
if (this.status === 'pending') {
promise2 = new Promise((resolve, reject) => {
//把成功的函数一个个存放到成功回调函数数组中
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFuiFilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0)
});
//把失败的函数一个个存放到失败回调函数数组中
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
})
})
}
return promise2; //调用then后返回一个新的promise
}
catch (onRejected) {
// catch 方法就是then方法没有成功的简写
return this.then(null, onRejected);
}
}
Promise.all = function (promises) {
//promises是一个promise的数组
return new Promise(function (resolve, reject) {
let arr = []; //arr是最终返回值的结果
let i = 0; // 表示成功了多少次
function processData(index, data) {
arr[index] = data;
if (++i === promises.length) {
resolve(arr);
}
}
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (data) {
processData(i, data)
}, reject)
}
})
}
// 只要有一个promise成功了 就算成功。如果第一个失败了就失败了
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (var i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject)
}
})
}
// 生成一个成功的promise
Promise.resolve = function (value) {
return new Promise((resolve, reject) => resolve(value);
}
// 生成一个失败的promise
Promise.reject = function (reason) {
return new Promise((resolve, reject) => reject(reason));
}
//语法糖
Promise.defer = Promise.deferred = function () {
let dfd = {};
dfd.promise = new Promise((resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd
}
module.exports = Promise;
复制代码