一、Promise 相关概念
学习参考 廖雪峰 的博客：
在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行，异步执行可以用回调函数实现：
function callback() {
console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()');
观察上述代码执行，在Chrome的控制台输出可以看到：
before setTimeout()
after setTimeout()
(等待1秒后)
Done
即：异步操作会在将来的某个时间点触发一个函数调用。
再来一个例子：
回调函数使用频率很高的不能不提 ajax 请求，由于网速等问题，客户端发起一个ajax请求后，得到响应的时间是不固定的。
在ajax的原生实现中，利用了onreadystatechange事件，当该事件触发并且符合一定条件时，才能拿到我们想要的数据，之后我们才能开始处理数据。
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:3000/api/one',true);
xhr.send();
xhr.onreadystatechange = function () {
console.log(xhr.readyState);
if(xhr.readyState === 4){ // 代表服务器已经给了响应, 不代表响应成功
if(xhr.status === 200){
console.log(xhr.response);
}
}
}
如果这个时候，我们还需要做另外一个ajax请求，这个新的ajax请求中的一个参数，得从上一个ajax请求中获取，这个时候，得在上一个里面继续进行一个 ajax 请求：
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:3000/api/one',true);
xhr.send();
xhr.onreadystatechange = function () {
console.log(xhr.readyState);
if(xhr.readyState === 4){ // 代表服务器已经给了响应, 不代表响应成功
if(xhr.status === 200){
// 在这里进行新的 ajax 请求
var xhr2 = new XMLHttpRequest();
xhr2.open('get','http://localhost:3000/api/one',true);
xhr2.send();
xhr.onreadystatechange = function () {.........}
}
}
}
好，那么如果再来一个呢，这个就是 回调地狱了，为了解决 回调地狱 的问题，让代码更加可读，于是有了 Promise
“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
二、Promise 原理
Promise对象有三种状态：
- pending: 等待中，或者进行中，表示还没有得到结果
- resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行
- rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行
三种状态不受外界影响，状态只能从 pending 变为 resolved 或者 rejected.
function fn(num){
return new Promise(function (resolve,reject) {
if(typeof num == 'number'){
resolve();
}else{
reject();
}
}).then(function () {
console.log('It is a number');
},function () {
console.log('It is not a number');
})
}
fn(1);
fn('hello');
// 打印结果：
/*
It is a number
It is not a number
*/
-
resolve() 和 reject() 的作用就是将状态修改为 resolved 和 rejected
-
.then() 里面两个 function() 参数，第一个是满足条件的resolve，第二个是不满足条件的 reject.分别根据获取到的状态去执行相应的函数
then 方法执行完后会返回一个 promise对象，所以可以进行.then的链式调用，这样就解决了回调地狱的问题
function fn(num) {
return new Promise(function (resolve,reject) {
if(typeof num == 'number'){
resolve();
}else{
reject();
}
})
.then(function () {
console.log('It is a number');
})
.then(null,function () {
console.log('It is not a number');
})
}
fn(123);
fn('hello');
/*
执行结果：
It is a number
It is not a number
*/
三、关于Promise的数据传递
var fn = function (num) {
return new Promise(function (resolve,reject) {
if(typeof num == 'number'){
resolve(num)
}else {
reject('not a number')
}
})
}
fn(1).then(function (num) {
console.log('first：' + num);
return num + 1;
})
.then(function(num) {
console.log('second: ' + num);
return num + 1;
})
.then(function(num) {
console.log('third: ' + num);
return num + 1;
});
/*
执行结果：
first：1
second: 2
third: 3
* */
多个参数传递：
new Promise((resolve, reject)=>{
resolve(1, 2, 232, 212);
}).then((data1, data2, data3, data4)=>{
console.log(data1, data2, data3, data4);
});
四、错误处理
关于错误处理：在使用 Promise 做异步流程控制的时候，关于异常的处理可以通过在最后一个 then 之后设置一个 catch，然后指定一个失败处理函数, 该函数可以捕获前面所有的 Promise 对象本身以及 then 内部的任务错误，当前面任何一个发生异常，直接进入 catch，后续所有的 Promise 包括 then 不再执行
const fs = require('fs');
// 1. 创建一个Promise对象 (一经创建, 立马执行)
readFile(__dirname + '/data/a.txt', 'utf8')
.then((data) => {
console.log(data.toString());
return readFile(__dirname + '/data/b.txt', 'utf8');
})
.then((data) => {
console.log(data.toString());
return readFile(__dirname + '/data/c.txt', 'utf8');
})
.then((data) => {
console.log(data.toString());
}).catch(err => {
console.log(err);
});
function readFile(...args) {
return new Promise((resolve, reject) => {
fs.readFile(...args, (err, data) => {
if (err) {
reject(err);
}
resolve(data);
})
})
}
五、封装ajax
主流框架的ajax一般都是 用Promise封装的。
Promise 封装ajax 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function xhr(options) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(options.type || 'get', options.url,true);
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if( xhr.status === 200){
try {
var response = JSON.parse(xhr.responseText);
resolve(response);
} catch (e) {
reject(e);
}
}else {
reject(xhr.responseText);
}
}
};
xhr.send();
})
}
xhr({
url:'http://ip.taobao.com/service/getIpInfo.php?ip=117.89.35.58',
type:'get',
data:''
}).then((data)=>{
console.log(data);
},function (err) {
console.log(err);
})
</script>
</body>
</html>
Promise封装ajax,待补充一个完整的，上面的这个现在只处理了 get 方式的
六、Promise.all
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
var p1 = new Promise(function (resolve, reject) {
resolve('111');
});
var p2 = new Promise(function (resolve,reject) {
resolve('222');
});
var p3 = new Promise(function (resolve,reject) {
reject('333')
});
Promise.all([p1,p2]).then(function (data) {
console.log(data); // 打印 [ '111', '222' ]
}).catch(function (err) {
console.log(err);
});
Promise.all([p1,p2,p3]).then(function (data) {
console.log(data);
}).catch(function (err) {
console.log(err); // 打印：333
})
- Promise.all 得到所有成功的结果的顺序，与传入的Promise对象的数组顺序保持一致。如上面的代码，即使是p2的结果先出来，顺序也不会变。
- 如果我们下一步的动作，需要等待其他的两个结果先出来才能判读是否要往下进行，用Promise.all 来解决。
七、Promise.race
race ：种族，赛跑
Promise.race([p1,p2,p3]), 里面的三个任务赛跑，谁先获取到结果谁就跑的快，不管返回的结果是成功还是失败。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1000秒--success');
console.log(1111);
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('500秒--failed')
console.log(2222);
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log('resolve:'+result)
},function (err) {
console.log('reject:'+err);
}).catch((error) => {
console.log('catch:'+error) // 打开的是 'failed'
});
/*
执行结果：
2222
reject:500秒--failed
1111
* */
- 只要是在数据组里的，都会执行
- 只返回了跑得快的任务的结果