什么是Promise
Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败
当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态，这也是它名字promise-承诺的由来
直接上案例了，在案例中理解：
最简单的promise
new Promise(resolve =>{
setTimeout(()=>{
resolve('hello')
},2000);
}).then(value=>{
console.log(value + 'world');
})
分两次，顺序执行
console.log('start');
new Promise(resolve => {
setTimeout(() => {
resolve('hello');
}, 2000);
})
.then(value => {
console.log(value);
return new Promise(resolve => {
setTimeout(() => {
resolve('world');
}, 2000)
});
})
.then(value => {
console.log(value + ' world');
});
// 结果
// start
// hello (2s)
// worldworld (4s)
假如一个promise已经完成，再.then()会怎样
console.log('start');
let promise = new Promise(resolve=>{
setTimeout(()=>{
console.log('this promise fullfilled');
resolve('hello,world')
},2000);
});
setTimeout(()=>{
promise.then(value=>{
console.log(value);
})
},4000)
// 结果
// start
// this promise fullfilled （2s）
// hello,world (4s)
//在任何地方生成一个promise后，可以存为一个变量，不管该promise有完成，都会依次根据队列执行
假如在 .then() 的函数里面不返回新的 Promise， 会怎样？
console.log('start');
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000);
})
.then(value => {
console.log(value);
(function () {
return new Promise(resolve => {
setTimeout(() => {
console.log('第二个promise');
resolve('Merry')
}, 2000);
})
}());
return false;
})
.then(value => {
console.log(value + 'world');
})
// 结果
// start
// hello （2s）
// falseworld (2s)
// 第二个promise (4s)
//.then() 的函数里面不返回新的 Promise,会默认执行下一个环节，即使你直接返回了false，也会执行
// 备注
// 匿名函数，(function(){})();立即执行,主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。
.then()接受两个函数作为参数，分别代表fulfilled和rejected
.then()返回一个新的promise实例，所以它可以链式调用
状态相应函数可以返回新的promise或其他值，如果返回新的Promise，那么下一级.then()会在新的Promise状态改变后执行
！！如果返回其他任何值，则会立即执行下一级.then()
.then()里面有.then()的情况
会等里面的.then()执行完，再执行外面的。最好不要这样写，依次展开效果一样
new Promise(resolve => {
console.log('start');
setTimeout(() => {
console.log('1');
resolve('1');
}, 1000)
})
.then(value => {
return new Promise(resolve => {
setTimeout(() => {
console.log('1-1');
resolve('1-1');
}, 1000)
})
.then(value => {
console.log('1-2');
return value;
})
.then(value => {
console.log('1-3');
return value;
})
})
.then(value => {
console.log('2');
})
/*
结果：
start
1
1-1
1-2
1-3
2
*/
错误处理两种做法：
Promise会自动捕获内部异常，并交给rejected响应函数处理
1.reject('错误信息').then(null,message=>{})
2.throw new Error('错误信息').catch(message=>{})
推荐时候用第二种，更加清晰，并且可以捕获前面的错误
console.log('go');
new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('bye')
// throw new Error('bye');
},1000)
})
.then(value=>{
console.log(value+'world');
})
.catch(error=>{
console.log('error:',error);
})
// go
// error: bye
.catch() + .then()连用
.catch()也会返回一个promise实例
建议在所有队列后面都加上.catch()
console.log('go');
new Promise(resolve=>{
setTimeout(() => {
resolve('');
}, 1000);
})
.then(()=>{
console.log('start')
throw new Error('test error');
})
.catch((err)=>{
console.log('I catch:'+ err);
// 下面一行代码的注释讲引发不同的走向
throw new Error('another error');
})
.then(()=>{
console.log('arrive here');
})
.then(()=>{
console.log('and here');
})
.catch((err)=>{
console.log('I catch:'+ err);
})
/*
结果一：
go
start
I catch:Error: test error
arrive here
and here
结果二：
go
start
I catch:Error: test error
I catch:Error: another error
*/
Promise.all([p1,p2,p3,...]); 批量同时执行多个promise实例，包装成一个新的promise实例，返回的是所有promise结果组成的数组
console.log('go');
Promise.all([1,2,3])
.then(all=>{
console.log('1:',all);
return Promise.all([function(){
console.log('ooxx');
},'xxoo',false])
})
.then(all =>{
console.log('2:',all);
let p1 = new Promise(resolve=>{
setTimeout(() => {
resolve('I`m P1');
}, 1000);
});
let p2 = new Promise(resolve=>{
setTimeout(() => {
resolve('I`m P2');
}, 3000);
});
return Promise.all([p1,p2]);
})
.then(all =>{
console.log('3:',all);
let p1 = new Promise(resolve=>{
setTimeout(() => {
resolve('I`m P1');
}, 1000);
});
let p2 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject('I`m P2');
}, 1000);
});
let p3 = new Promise((resolve,reject)=>{
setTimeout(() => {
reject('I`m P3');
}, 1500);
});
return Promise.all([p1,p2,p3]);
})
.then(all=>{
console.log('all:',all);
})
.catch(err=>{
console.log('catch',err);
})
/*
结果：
go
1: [ 1, 2, 3 ]
2: [ [Function], 'xxoo', false ]
3: [ 'I`m P1', 'I`m P2' ]
catch I`m P2
*/