首先我们应该知道Promise是通过构造函数的方式来创建的(new Promise( executor )),并且为 executor函数 传递参数:
function Promi(executor) {
executor(resolve, reject);
function resolve() {}
function reject() {}
}
再来说一下Promise的三种状态: pending-等待, resolve-成功, reject-失败, 其中最开始为pending状态, 并且一旦成功或者失败, Promise的状态便不会再改变,所以根据这点:
function Promi(executor) {
let _this = this;
_this.$$status = 'pending';
executor(resolve.bind(this), reject.bind(this));
function resolve() {
if (_this.$$status === 'pending') {
_this.$$status = 'full'
}
}
function reject() {
if (_this.$$status === 'pending') {
_this.$$status = 'fail'
}
}
}
其中$$status来记录Promise的状态,只有当promise的状态未pending时我们才会改变它的状态为'full'或者'fail', 因为我们在两个status函数中使用了this,显然使用的是Promise的一些属性,所以我们要绑定resolve与reject中的this为当前创建的Promise;
这样我们最最最基础的Promise就完成了(只有头部没有四肢...)
接着,所有的Promise实例都可以用.then方法,其中.then的两个参数,成功的回调和失败的回调也就是我们所说的resolve和reject:
function Promi(executor) {
let _this = this;
_this.$$status = 'pending';
_this.failCallBack = undefined;
_this.successCallback = undefined;
_this.error = undefined;
executor(resolve.bind(_this), reject.bind(_this));
function resolve(params) {
if (_this.$$status === 'pending') {
_this.$$status = 'success'
_this.successCallback(params)
}
}
function reject(params) {
if (_this.$$status === 'pending') {
_this.$$status = 'fail'
_this.failCallBack(params)
}
}
}
Promi.prototype.then = function(full, fail) {
this.successCallback = full
this.failCallBack = fail
};
// 测试代码
new Promi(function(res, rej) {
setTimeout(_ => res('成功'), 30)
}).then(res => console.log(res))
讲一下这里:
可以看到我们增加了failCallBack和successCallback,用来储存我们在then中回调,刚才也说过,then中可传递一个成功和一个失败的回调,当P的状态变为resolve时执行成功回调,当P的状态变为reject或者出错时则执行失败的回调,但是具体执行结果的控制权没有在这里。但是我们知道一定会调用其中的一个。
executor任务成功了肯定有成功后的结果,失败了我们肯定也拿到失败的原因。所以我们可以通过params来传递这个结果或者error reason(当然这里的params也可以拆开赋给Promise实例)其实写到这里如果是面试题,基本上是通过了,也不会有人让你去完整地去实现
error:用来存储,传递reject信息以及错误信息
我想我们最迷恋的应该就是Promise的链式调用吧,因为它的出现最最最大的意义就是使我们的callback看起来不那么hell(因为我之前讲到了async比它更直接),那么为什么then能链式调用呢? then一定返回了一个也具有then方法的对象
我想大家应该都能猜到.then返回的也一定是一个promise,那么这里会有一个有趣的问题,就是.then中返回的到底是一个新promise的还是链式头部的调用者?????
从代码上乍一看, Promise.then(...).catch(...) 像是针对最初的 Promise 对象进行了一连串的方法链调用。
然而实际上不管是 then 还是 catch 方法调用,都返回了一个新的promise对象。简单有力地证明一下
var beginPromise = new Promise(function (resolve) {
resolve(100);
});
var thenPromise = beginPromise.then(function (value) {
console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
console.error(error);
});
console.log(beginPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true
显而易见promise返回的是一个新的而非调用者
不过这样的话难度就来了,我们看下面代码:
function begin() {
return new Promise(resolve => {
setTimeout(_ => resolve('first') , 2000)
})
}
begin().then(data => {
console.log(data)
return new Promise(resolve => {
})
}).then(res => {
console.log(res)
});
我们知道最后的then中函数参数永远都不会执行,为什么说它难呢,想一下,之所以能链式调用是因为.then()执行之后返回了一个新的promise,一定注意,我说的新的promise是then()所返回而不是data => return new Promise....(这只是then的一个参数),这样问题就来了,我们从刚才的情况看,知道只有第一个.then中的状态改变时第二个then中的函数参数才会执行,放到程序上说也就是需要第一个.then中返回的promise状态改变!即:
begin().then(data => {
console.log(data)
return new Promise(resolve => {
setTimeout(_ => resolve('two'), 1000)
})
}).then(res => {
console.log(res)
});
直接从代码的角度上讲,调用了第一个.then中的函数参数中的resolve之后第一个.then()返回的promise状态也改变了,这句话有些绕,我用一张图来讲:
那么问题就来了,我们如何使得P2的状态发生改变通知P1?
其实这里用观察者模式是可以的,但是代价有点大,换个角度想,其实我们直接让P2中的resolve等于P1中的resolve不就可以了?这样P2中调用了resolve之后同步的P1也相当于onresolve了,上代码:
function Promi(executor) {
let _this = this;
_this.$$status = 'pending';
_this.failCallBack = undefined;
_this.successCallback = undefined;
_this.result = undefined;
_this.error = undefined;
setTimeout(_ => {
executor(_this.resolve.bind(_this), _this.reject.bind(_this));
})
}
Promi.prototype.then = function(full, fail) {
let newPromi = new Promi(_ => {});
this.successCallback = full;
this.failCallBack = fail;
this.successDefer = newPromi.resolve.bind(newPromi);
this.failDefer = newPromi.reject.bind(newPromi);
return newPromi
};
Promi.prototype.resolve = function(params) {
let _this = this;
if (_this.$$status === 'pending') {
_this.$$status = 'success';
if (!_this.successCallback) return;
let result = _this.successCallback(params);
if (result && result instanceof Promi) {
result.then(_this.successDefer, _this.failDefer);
return ''
}
_this.successDefer(result)
}
}
Promi.prototype.reject = function(params) {
let _this = this;
if (_this.$$status === 'pending') {
_this.$$status = 'fail';
if (!_this.failCallBack) return;
let result = _this.failCallBack(params);
if (result && result instanceof Promi) {
result.then(_this.successDefer, _this.failDefer);
return ''
}
_this.successDefer(result)
}
}
// 测试代码
new Promi(function(res, rej) {
setTimeout(_ => res('成功'), 500)
}).then(res => {
console.log(res);
return '第一个.then成功'
}).then(res => {
console.log(res);
return new Promi(function(resolve) {
setTimeout(_ => resolve('第二个.then成功'), 500)
})
}).then(res => {
console.log(res)
return new Promi(function(resolve, reject) {
setTimeout(_ => reject('第三个失败'), 1000)
})
}).then(res => {res
console.log(res)
}, rej => console.log(rej));
其实做到这里我们还有好多好多没有完成,比如错误处理,reject处理,catch实现,.all实现,.race实现,其实原理也都差不多,(all和race以及resolve和reject其实返回的都是一个新的Promise),错误的传递?还有很多细节我们都没有考虑到,我这里写了一个还算是比较完善的:
function Promi(executor) {
let _this = this;
_this.$$status = 'pending';
_this.failCallBack = undefined;
_this.successCallback = undefined;
_this.error = undefined;
setTimeout(_ => {
try {
executor(_this.onResolve.bind(_this), _this.onReject.bind(_this))
} catch (e) {
_this.error = e;
if (_this.callBackDefer && _this.callBackDefer.fail) {
_this.callBackDefer.fail(e)
} else if (_this._catch) {
_this._catch(e)
} else {
throw new Error('un catch')
}
}
})
}
Promi.prototype = {
constructor: Promi,
onResolve: function(params) {
if (this.$$status === 'pending') {
this.$$status = 'success';
this.resolve(params)
}
},
resolve: function(params) {
let _this = this;
let successCallback = _this.successCallback;
if (successCallback) {
_this.defer(successCallback.bind(_this, params));
}
},
defer: function(callBack) {
let _this = this;
let result;
let defer = _this.callBackDefer.success;
if (_this.$$status === 'fail' && !_this.catchErrorFunc) {
defer = _this.callBackDefer.fail;
}
try {
result = callBack();
} catch (e) {
result = e;
defer = _this.callBackDefer.fail;
}
if (result && result instanceof Promi) {
result.then(_this.callBackDefer.success, _this.callBackDefer.fail);
return '';
}
defer(result)
},
onReject: function(error) {
if (this.$$status === 'pending') {
this.$$status = 'fail';
this.reject(error)
}
},
reject: function(error) {
let _this = this;
_this.error = error;
let failCallBack = _this.failCallBack;
let _catch = _this._catch;
if (failCallBack) {
_this.defer(failCallBack.bind(_this, error));
} else if (_catch) {
_catch(error)
} else {
setTimeout(_ => { throw new Error('un catch promise') }, 0)
}
},
then: function(success = () => {}, fail) {
let _this = this;
let resetFail = e => e;
if (fail) {
resetFail = fail;
_this.catchErrorFunc = true;
}
let newPromise = new Promi(_ => {});
_this.callBackDefer = {
success: newPromise.onResolve.bind(newPromise),
fail: newPromise.onReject.bind(newPromise)
};
_this.successCallback = success;
_this.failCallBack = resetFail;
return newPromise
},
catch: function(catchCallBack = () => {}) {
this._catch = catchCallBack
}
};
// 测试代码
task()
.then(res => {
console.log('1:' + res)
return '第一个then'
})
.then(res => {
return new Promi(res => {
setTimeout(_ => res('第二个then'), 3000)
})
}).then(res => {
console.log(res)
})
.then(res => {
return new Promi((suc, fail) => {
setTimeout(_ => {
fail('then失败')
}, 400)
})
})
.then(res => {
console.log(iko)
})
.then(_ => {}, () => {
return new Promi(function(res, rej) {
setTimeout(_ => rej('promise reject'), 3000)
})
})
.then()
.then()
.then(_ => {},
rej => {
console.log(rej);
return rej + '处理完成'
})
.then(res => {
console.log(res);
// 故意出错
console.log(ppppppp)
})
.then(res => {}, rej => {
console.log(rej);
// 再次抛错
console.log(oooooo)
}).catch(e => {
console.log(e)
})
还有一段代码是我将所有的.then全部返回调用者来实现的,即全程都用一个promise来记录状态存储任务队列,这里就不发出来了,有兴趣可以一起探讨下.
来源:https://segmentfault.com/a/1190000020505870
Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.
Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。
Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数
这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。
在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,
最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因
想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行
你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve
Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!