对于ES6中Promise的个人见解

1.js中常见的异步

  • JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作。
 let button = document.getElementById("btn");
buttom.onclick = function(event){
console.log(“I was clicked !!")
};
  • 在Node.js中更是使用大量的回调来代替事件来实现异步编程。

  node中读取文件方法及参数 

  fs.readFile(filename, [encoding], [callback(err,data)]);

 var fs = require('fs');
fs.readFile('/Users/xiaosong/Desktop/example.txt', 'utf-8', function (err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
}
});

2.但是事件和回调并不能满足需求,比如像并行执行两个异步操作,两个操作结束时都通知你,或者说同时进行两个异步操作,

 想要优先完成的通知你。想要满足这些你可能写很多的回调,而Promise可以很好的解决这些问题。

3.那么什么是Promise呢?

  • 我的理解就是它只是另一种异步编程的选择,就像事件和回调函数一样指定稍后执行的代码,但是它可以指示代码是否成功的执行,基于成功和失败的状态分别执行什么,更加易于理解和调试。
 let fs = require("fs");
function readFile(filename){
return new Promise(function(resolve,reject){
// Promise只接受一个参数叫做执行器函数,接受resolve和reject两个函数
fs.readFile(filename,{encoding:"utf-8"},function(err,data){
//错误优先,检查是否出错
if(err){
reject(err);
return;
}
//成功读取文件
resolve(data);
});
});
};
let promise = readFile("/Users/xiaosong/Desktop/example.txt");
promise.then(function(data){
//完成
console.log(data);
},function(err){
//拒绝
console.log(err.message);
});

输出的是---->就算失败也要摆出豪迈的姿态。<----    很明显这是陈咬金的台词!!

这就是一个完整的Promise了。看到这里感觉估计还是蒙逼的请让在下为你细细道来

let promise = new Promise(function(reslove,reject){
console.log("A");
reslove();
});
promise.then(function(){
console.log("B");
});
console.log("C");

输出ACB

  • 为什么会这样输出呢? 就是因为执行器中调用了resolve();
   触发了一个异步的操作then()与执行器不同没有立即执行,它总是等执行器完成后被添加到任务队列的末尾。
4. 每一个Promise都会经历一个短暂的生命周期
•Pending  进行中的状态;

当这个状态结束后会进入下面两种状态之一:

•Fulfiled Promise异步操作成功
•Rejected 由于某些缘故出错了,Promise异步操作未能成功

内部有[[PromiseState]]这个属性来表示这三种状态,但是这个属性又没有在Promise上暴漏出来所以并不能对它进行编程来检测Promise所处的状态,那么怎么办呢。

5. 但还是有办法的,当Promise状态改变时可以通过then()这个方法来采取特定的行为,所有的Promise都有then()方法;
•then()有两个参数
•第一参数是状态为Fulfilled时调用的函数
•第二参数是状态为Rejected时调用的函数
与异步相关对应状态的数据都会传给对应的函数
这两个参数都是可选的,可以按照任意的组合来监听Promise
promise.then(function(data){
//完成
console.log(data);
},function(err){
//拒绝
console.log(err.message);
});
promise.then(null,function(err){
//拒绝
console.log(err.message);
});

那么我以上讲的创建的都是未完成的Promise,可能乍一看来创建未完成的Promise尚且有意义但是创建已处理的有什么意义呢!

let promise = Promise.reject("我是一段安静的文字,你不会知道我是安静的");
promise.catch(function(value){
console.log(value); // 我是一段安静的文字,你不会知道我是安静的
});
let promise = Promise.resolve("我是一段安静的文字,你不会知道我是安静的");
promise.then(function(value){
console.log(value); // 我是一段安静的文字,你不会知道我是安静的
});
•这就是重点了,如果向Promise.resolve()或者Promise.reject()传入Promise那么这个Promise会直接返回,如果传入的不是Promise的thenable对象则会创建一个新的Promise对象并在then()函数中被调用。
•那什么又是thenable对象呢?

有then()方法并且接受resolve和reject两个参数的普通对象:

let thenable = {
then: function(resolve, reject){
resolve("我是一段开心的文字,没人知道我在乐啥");
}
};
let promise = Promise.resolve(thenable);
promise.then(function(value){
console.log(value) //我是一段开心的文字,没人知道我在乐啥
});
•好吧你可能感觉这还是没有什么卵用但是要知道在ECMAScript6之前有很多库是支持Promise的且使用了thenable对象,这个可以帮助转换为正式的Promise对象,管他真假Promise先塞进去变成真的再说。

    <script>
function MyPromise(func){
var deferred = $.Deferred();
func(deferred.resolve, deferred.reject);
return deferred.promise();
};
new MyPromise(function(resolve, reject){
console.log(1);
resolve();
console.log(2);
}).then(function(){
console.log(3);
});
console.log(4);
// 在jquery1.6.4的版本下输出是1234
// 在jquery3.2.1中输出是 1243
</script>

在ES6中

new Promise(function (resolve,reject) {
console.log(1);
resolve();
console.log(2);
}).then(function () {
console.log(3);
});
console.log(4);
// 这里同样输出的也是1243

从这里看JQuery也是在向标准看齐的。

6. Promise还可以串联调用
就像这样:
promise.then().then().then()……
let promise = new Promise(function(resolve,reject){
resolve("淡定的文字");
}); promise.then(function(value){
console.log(value);
return value + ",不开心"
}).then(function(value){
console.log(value);
return value + "怎么办"
}).then(function(value){
console.log(value);
throw new Error("又错了");
}).catch(function(err){
console.log(err.message);
});

输出:

  淡定的文字
  淡定的文字,不开心
  淡定的文字,不开心怎么办
  又错了

我是这样理解的每一次调用then()后都会再一次返回一个新的promise,这样新的Promise就又会接着调用后面的then()就这样一直下去直到最后一个then();

promise的链上最后做好要加上一个处理拒绝处理程序then或者是catch()这样方便处理在链上可能发生的错误;
但是这样又会出现一个问题怎样把链上的上一then()的数据传给下面一个then呢,虽然理解起来他是生成的是新的Promise,但总不能再写一个resolve()吧,很明显不行只能使用return 把下一个then()要使用的数据使用return 传过去。
7.之前的都是对单个Promise响应,也可以监听多个Promise进行响应来决定下一步的执行,Promise.all();
接收的是一个由多个Promise组成的数组,只有这些Promise都成功完成并返回一个Promise才会被完成。
let p1 = new Promise(function(resolve,reject){
resolve("OK one");
}); let p2 = new Promise(function(resolve,reject){
reject("refuse two");
}); let p3 = new Promise(function(resolve,reject){
resolve("OK three");
}); let p4 = Promise.all([p1,p2,p3]); p4.catch(function(value){
console.log(Array.isArray(value)); //false
})
let p1 = new Promise(function(resolve,reject){
resolve("OK one");
}); let p2 = new Promise(function(resolve,reject){
resolve("refuse two");
}); let p3 = new Promise(function(resolve,reject){
resolve("OK three");
}); let p4 = Promise.all([p1,p2,p3]); p4.then(function(value){
console.log(Array.isArray(value)); //true
})

8.能够监听多个Promise的方法还有Promise.race();它的参数和Promise.all()是相同的,返回的也是一个Promise,但是使用这个方法监听的是最先被解决的Promise,谁先被解决就返回谁,无需等到所有的Promise都完成。

let p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK one");
},200);
}); let p2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK two");
},100);
}); let p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK three");
},300);
}); let p4 = Promise.race([p1,p2,p3]); p4.then(function(value){
console.log(value); //two
})

ok 这就是我对promise的浅见。

---恢复内容结束---

1.js中常见的异步

  • JavaScript可以响应用户的一些异步交互,比如单击鼠标和按键盘等操作。
 let button = document.getElementById("btn");
buttom.onclick = function(event){
console.log(“I was clicked !!")
};
  • 在Node.js中更是使用大量的回调来代替事件来实现异步编程。

  node中读取文件方法及参数 

  fs.readFile(filename, [encoding], [callback(err,data)]);

 var fs = require('fs');
fs.readFile('/Users/xiaosong/Desktop/example.txt', 'utf-8', function (err, data) {
if (err) {
console.log(err);
} else {
console.log(data);
}
});

2.但是事件和回调并不能满足需求,比如像并行执行两个异步操作,两个操作结束时都通知你,或者说同时进行两个异步操作,

 想要优先完成的通知你。想要满足这些你可能写很多的回调,而Promise可以很好的解决这些问题。

3.那么什么是Promise呢?

  • 我的理解就是它只是另一种异步编程的选择,就像事件和回调函数一样指定稍后执行的代码,但是它可以指示代码是否成功的执行,基于成功和失败的状态分别执行什么,更加易于理解和调试。
 let fs = require("fs");
function readFile(filename){
return new Promise(function(resolve,reject){
// Promise只接受一个参数叫做执行器函数,接受resolve和reject两个函数
fs.readFile(filename,{encoding:"utf-8"},function(err,data){
//错误优先,检查是否出错
if(err){
reject(err);
return;
}
//成功读取文件
resolve(data);
});
});
};
let promise = readFile("/Users/xiaosong/Desktop/example.txt");
promise.then(function(data){
//完成
console.log(data);
},function(err){
//拒绝
console.log(err.message);
});

输出的是---->就算失败也要摆出豪迈的姿态。<----    很明显这是陈咬金的台词!!

这就是一个完整的Promise了。看到这里感觉估计还是蒙逼的请让在下为你细细道来

let promise = new Promise(function(reslove,reject){
console.log("A");
reslove();
});
promise.then(function(){
console.log("B");
});
console.log("C");

输出ACB

  • 为什么会这样输出呢? 就是因为执行器中调用了resolve();
   触发了一个异步的操作then()与执行器不同没有立即执行,它总是等执行器完成后被添加到任务队列的末尾。
4. 每一个Promise都会经历一个短暂的生命周期
•Pending  进行中的状态;

当这个状态结束后会进入下面两种状态之一:

•Fulfiled Promise异步操作成功
•Rejected 由于某些缘故出错了,Promise异步操作未能成功

内部有[[PromiseState]]这个属性来表示这三种状态,但是这个属性又没有在Promise上暴漏出来所以并不能对它进行编程来检测Promise所处的状态,那么怎么办呢。

5. 但还是有办法的,当Promise状态改变时可以通过then()这个方法来采取特定的行为,所有的Promise都有then()方法;
•then()有两个参数
•第一参数是状态为Fulfilled时调用的函数
•第二参数是状态为Rejected时调用的函数
与异步相关对应状态的数据都会传给对应的函数
这两个参数都是可选的,可以按照任意的组合来监听Promise
promise.then(function(data){
//完成
console.log(data);
},function(err){
//拒绝
console.log(err.message);
});
promise.then(null,function(err){
//拒绝
console.log(err.message);
});

那么我以上讲的创建的都是未完成的Promise,可能乍一看来创建未完成的Promise尚且有意义但是创建已处理的有什么意义呢!

let promise = Promise.reject("我是一段安静的文字,你不会知道我是安静的");
promise.catch(function(value){
console.log(value); // 我是一段安静的文字,你不会知道我是安静的
});
let promise = Promise.resolve("我是一段安静的文字,你不会知道我是安静的");
promise.then(function(value){
console.log(value); // 我是一段安静的文字,你不会知道我是安静的
});
•这就是重点了,如果向Promise.resolve()或者Promise.reject()传入Promise那么这个Promise会直接返回,如果传入的不是Promise的thenable对象则会创建一个新的Promise对象并在then()函数中被调用。
•那什么又是thenable对象呢?

有then()方法并且接受resolve和reject两个参数的普通对象:

let thenable = {
then: function(resolve, reject){
resolve("我是一段开心的文字,没人知道我在乐啥");
}
};
let promise = Promise.resolve(thenable);
promise.then(function(value){
console.log(value) //我是一段开心的文字,没人知道我在乐啥
});
•好吧你可能感觉这还是没有什么卵用但是要知道在ECMAScript6之前有很多库是支持Promise的且使用了thenable对象,这个可以帮助转换为正式的Promise对象,管他真假Promise先塞进去变成真的再说。

    <script>
function MyPromise(func){
var deferred = $.Deferred();
func(deferred.resolve, deferred.reject);
return deferred.promise();
};
new MyPromise(function(resolve, reject){
console.log(1);
resolve();
console.log(2);
}).then(function(){
console.log(3);
});
console.log(4);
// 在jquery1.6.4的版本下输出是1234
// 在jquery3.2.1中输出是 1243
</script>

在ES6中

new Promise(function (resolve,reject) {
console.log(1);
resolve();
console.log(2);
}).then(function () {
console.log(3);
});
console.log(4);
// 这里同样输出的也是1243

从这里看JQuery也是在向标准看齐的。

6. Promise还可以串联调用
就像这样:
promise.then().then().then()……
let promise = new Promise(function(resolve,reject){
resolve("淡定的文字");
}); promise.then(function(value){
console.log(value);
return value + ",不开心"
}).then(function(value){
console.log(value);
return value + "怎么办"
}).then(function(value){
console.log(value);
throw new Error("又错了");
}).catch(function(err){
console.log(err.message);
});

输出:

  淡定的文字
  淡定的文字,不开心
  淡定的文字,不开心怎么办
  又错了

我是这样理解的每一次调用then()后都会再一次返回一个新的promise,这样新的Promise就又会接着调用后面的then()就这样一直下去直到最后一个then();

promise的链上最后做好要加上一个处理拒绝处理程序then或者是catch()这样方便处理在链上可能发生的错误;
但是这样又会出现一个问题怎样把链上的上一then()的数据传给下面一个then呢,虽然理解起来他是生成的是新的Promise,但总不能再写一个resolve()吧,很明显不行只能使用return 把下一个then()要使用的数据使用return 传过去。
7.之前的都是对单个Promise响应,也可以监听多个Promise进行响应来决定下一步的执行,Promise.all();
接收的是一个由多个Promise组成的数组,只有这些Promise都成功完成并返回一个Promise才会被完成。
let p1 = new Promise(function(resolve,reject){
resolve("OK one");
}); let p2 = new Promise(function(resolve,reject){
reject("refuse two");
}); let p3 = new Promise(function(resolve,reject){
resolve("OK three");
}); let p4 = Promise.all([p1,p2,p3]); p4.catch(function(value){
console.log(Array.isArray(value)); //false
})
let p1 = new Promise(function(resolve,reject){
resolve("OK one");
}); let p2 = new Promise(function(resolve,reject){
resolve("refuse two");
}); let p3 = new Promise(function(resolve,reject){
resolve("OK three");
}); let p4 = Promise.all([p1,p2,p3]); p4.then(function(value){
console.log(Array.isArray(value)); //true
})

8.能够监听多个Promise的方法还有Promise.race();它的参数和Promise.all()是相同的,返回的也是一个Promise,但是使用这个方法监听的是最先被解决的Promise,谁先被解决就返回谁,无需等到所有的Promise都完成。

let p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK one");
},200);
}); let p2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK two");
},100);
}); let p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("OK three");
},300);
}); let p4 = Promise.race([p1,p2,p3]); p4.then(function(value){
console.log(value); //two
})

ok 这就是我对promise的浅见。

上一篇:MAX-HEAPIFY(2/3n的疑惑)


下一篇:[HDU4635] Strongly connected