Promise不会？？看这里！！！史上最通俗易懂的Promise！！！
1、什么是Promise？咱们用Promise来解决什么问题？
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它能够获取异步操做的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会当即执行。
我相信你们常常写这样的代码：es6
// 当参数a大于10且参数fn2是一个方法时 执行fn2
function fn1(a, fn2) {
if (a > 10 && typeof fn2 == 'function') {
fn2()
}
}
fn1(11, function() {
console.log('this is a callback')
})复制代码
这时候咱们的promise就应运而生、粉墨登场了编程
promise是用来解决两个问题的：数组
-
回调地狱，代码难以维护， 经常第一个的函数的输出是第二个函数的输入这种现象
-
promise能够支持多个并发的请求，获取并发请求中的数据
-
这个promise能够解决异步的问题，自己不能说promise是异步的
2、es6 promise用法大全
Promise是一个构造函数，本身身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等一样很眼熟的方法。promise
那就new一个bash
let p = new Promise((resolve, reject) => {
//作一些异步操做
setTimeout(() => {
console.log('执行完成');
resolve('我是成功！！');
}, 2000);
});复制代码
Promise的构造函数接收一个参数：函数，而且这个函数须要传入两个参数：
- resolve ：异步操做执行成功后的回调函数
- reject：异步操做执行失败后的回调函数
then 链式操做的用法
因此，从表面上看，Promise只是可以简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数可以及时调用，它比传递callback函数要简单、灵活的多。因此使用Promise的正确场景是这样的：
p.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
});复制代码
reject的用法 :
把Promise的状态置为rejected，这样咱们在then中就能捕捉到，而后执行“失败”状况的回调。看下面的代码。并发
let p = new Promise((resolve, reject) => {
//作一些异步操做
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
p.then((data) => {
console.log('resolved',data);
},(err) => {
console.log('rejected',err);
}
);
复制代码
then中传了两个参数，then方法能够接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。因此咱们可以分别拿到他们传过来的数据。屡次运行这段代码，你会随机获得下面两种结果：
或者
catch的用法
咱们知道Promise对象除了then方法，还有一个catch方法，它是作什么用的呢？其实它和then的第二个参数同样，用来指定reject的回调。用法是这样：
p.then((data) => {
console.log('resolved',data);
}).catch((err) => {
console.log('rejected',err);
});复制代码
效果和写在then的第二个参数里面同样。不过它还有另一个做用：在执行resolve的回调（也就是上面then中的第一个参数）时，若是抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：
框架
p.then((data) => {
console.log('resolved',data);
console.log(somedata); //此处的somedata未定义
})
.catch((err) => {
console.log('rejected',err);
});复制代码
在resolve的回调中，咱们console.log(somedata);而somedata这个变量是没有被定义的。若是咱们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。可是在这里，会获得这样的结果：
也就是说进到catch方法里面去了，并且把错误缘由传到了reason参数中。即使是有错误的代码也不会报错了，这与咱们的try/catch语句有相同的功能
all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象
Promise的all方法提供了并行执行异步操做的能力，而且在全部异步操做执行完后才执行回调。看下面的例子：
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三个都成功则成功
}, function(){
// 只要有失败，则失败
})
复制代码
有了all，你就能够并行执行多个异步操做，而且在一个回调中处理全部的返回数据，是否是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载须要用到的各类资源如图片、flash以及各类静态文件。全部的都加载完后，咱们再进行页面的初始化。dom
race的用法：谁跑的快，以谁为准执行回调
race的使用场景：好比咱们能够用race给某个异步请求设置超时时间，而且在超时后执行相应的操做，代码以下：
//请求某个图片资源
function requestImg(){
var p = new Promise((resolve, reject) => {
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = '图片的路径';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
复制代码
requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，因此确定是没法成功请求到的。timeout函数是一个延时5秒的异步操做。咱们把这两个返回Promise对象的函数放进race，因而他俩就会赛跑，若是5秒以内图片请求成功了，那么遍进入then方法，执行正常的流程。若是5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果以下：
好了，我相信你们对用法已经懂了，那么咱们来手写一款本身的promise吧异步
3、根据promiseA+实现一个本身的promise
步骤一：实现成功和失败的回调方法
要实现上面代码中的功能，也是promise最基本的功能。首先，须要建立一个构造函数promise，建立一个promisel类，在使用的时候传入了一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。以前说过，只要成功，就不会失败，只要失败就不会成功。因此，默认状态下，在调用成功时，就返回成功态，调用失败时，返回失败态。代码以下：异步编程
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失败了
}
}复制代码
promise A+规范规定，在有异常错误时，则执行失败函数。
constructor (executor){
...... try{
executor(resolve,reject);
}catch(e){
reject(e);
}
}
复制代码
步骤二：then方法链式调用
then方法是promise的最基本的方法，返回的是两个回调，一个成功的回调，一个失败的回调，实现过程以下：
then(onFulFilled, onRejected) {
if (this.status === 'resolved') { //成功状态的回调
onFulFilled(this.value);
}
if (this.status === 'rejected') {//失败状态的回调
onRejected(this.reason);
}
}复制代码
let p = new Promise(function(){
resolve('我是成功');
})
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
复制代码
返回的结果是：
我是成功
我是成功
我是成功
复制代码
为了实现这样的效果，则上一次的代码将要从新写过，咱们能够把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入一个数组。这就是
为什么会在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的缘由。所以，在调用resolve()或者reject()以前，咱们在pending状态时，会把屡次then中的结果存入数组中，则上面的代码会改变为：
then(onFulFilled, onRejected) {
if (this.status === 'resolved') {
onFulFilled(this.value);
}
if (this.status === 'rejected') {
onRejected(this.reason);
}
// 当前既没有完成 也没有失败
if (this.status === 'pending') {
// 存放成功的回调
this.onResolvedCallbacks.push(() => {
onFulFilled(this.value);
});
// 存放失败的回调
this.onRejectedCallbacks.push(() => {
onRejected(this.reason);
});
}
}复制代码
Promise A+规范中规定then方法能够链式调用
在promise中，要实现链式调用返回的结果是返回一个新的promise，第一次then中返回的结果，不管是成功或失败，都将返回到下一次then中的成功态中，但在第一次then中若是抛出异常错误，则将返回到下一次then中的失败态中
链式调用成功时
链式调用成功会返回值，有多种状况，根据举的例子，大体列出可能会发生的结果。所以将链式调用返回的值单独写一个方法。方法中传入四个参数，分别是p2,x,resolve,reject,p2指的是上一次返回的promise，x表示运行promise返回的结果，resolve和reject是p2的方法。则代码写为：
function resolvePromise(p2,x,resolve,reject){
....
}
复制代码
- 返回结果不能是本身
var p = new Promise((resovle,reject) => {
return p; //返回的结果不能是本身，
})
复制代码
当返回结果是本身时，永远也不会成功或失败，所以当返回本身时，应抛出一个错误
function resolvePromise(p2,x,resolve,reject){
if(px===x){
return reject(new TypeError('本身引用本身了'));
}
....
}
复制代码
- 返回结果多是promise
function resolvePromise(promise2,x,resolve,reject){
//判断x是否是promise
//规范中规定：咱们容许别人乱写，这个代码能够实现咱们的promise和别人的promise 进行交互
if(promise2 === x){//不能本身等待本身完成
return reject(new TypeError('循环引用'));
};
// 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 = 123 x就是一个普通值 做为下个then成功的参数
resolve(x)
}
}复制代码
- 返回结果可能为一个普通值，则直接 resolve(x);
- Promise一次只能调用成功或者失败
也就是当调用成功就不能再调用失败了，若是两个都调用的时候，哪一个先调用就执行哪个。代码部分仍是上面那部分
我的认为，这个地方比较绕，须要慢慢的一步一步的理清楚。
根据promise A+规范原理，promise在本身的框架中，封装了一系列的内置的方法。
- 捕获错误的方法 catch()
- 解析所有方法 all()
- 竞赛 race()
- 生成一个成功的promise resolve()
- 生成一个失败的promise reject()
最后给你们附上所有源码，供你们仔细品读。
function resolvePromise(promise2,x,resolve,reject){
//判断x是否是promise
//规范中规定：咱们容许别人乱写，这个代码能够实现咱们的promise和别人的promise 进行交互
if(promise2 === x){//不能本身等待本身完成
return reject(new TypeError('循环引用'));
};
// 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 = 123 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;
复制代码
关于这篇promise A+规范的总结，确定会存在不少不足的地方，欢迎各位提出宝贵的意见或建议，也但愿能帮助到你从中得到一些知识！
相关文章
- 1. Promise不会？？看这里！！！史上最通俗易懂的Promise！！！
- 2. 最最最通俗易懂的promise手写系列（一）
- 3. 看了就会，手写Promise原理，最通俗易懂的版本！！！
- 4. 最最最通俗易懂的promise手写系列（二）- 链式调用
- 5. 【面试高频知识点】promise的理解（通俗易懂）
- 6. 【手写Promise】史上最最最详细的手写Promise教程
- 7. 史上最通俗易懂的hashCode()讲解
- 8. 史上最通俗易懂的理解云计算
- 9. Promise之你看得懂的Promise
- 10. 史上最通俗易懂的单点登陆，一遍就能懂
- 更多相关文章...
- • Git 查看提交历史 - Git 教程
- • SVN 查看历史信息 - SVN 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 再有人问你分布式事务，把这篇扔给他
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
