title: promise
date: 2019-01-30 17:49:36
tags: js
js 实现异步操作的一种方式
三种状态 等待（pending）、已完成（fulfilled）、已拒绝（rejected）
Promise 的构造函数接收一个函数作为参数，该函数接受两个额外的函数，resolve 和 reject，这两个函数分别代表将当前 Promise 置为 fulfilled(解决)和 rejected(拒绝)两个状态。Promise 正是通过这两个状态来控制异步操作的结果
resolve()内部的参数会传递给 then(); reject 方法参数传给 catch();
当 Promise 中的函数执行 resolve 方法后，由之前的 pending –> resolved
基础例子：
var promise = new Promise(function (resolve, reject) {
if (执行某些操作成功了) {
resolve({
name:'resolve'
});
}else {
//执行失败
reject({
name:'err'
});
}
})
同时监听成功和错误
promise.then(function(contents){
//成功
console.log(contents)
},function(err){
//拒绝
console.error(err.message)
})
只监听成功
promise.then(function(contents){
//成功
console.log(contents)
})
只监听错误
promise.then(null,function(error){
//拒绝
console.error(err)
})
promise的catch方法，相当于只给其传入拒绝处理程序的then()方法。
promise.catch(function(err){
console.error(err.message)
})
多个函数实战
function a() {
return new Promise(function(resolve, reject) {
console.log("a");
});
}
function b() {
return new Promise(function(resolve, reject) {
console.log("b");
});
}
function c() {
return new Promise(function(resolve, reject) {
console.log("c");
});
}
a()
.then(b())
.then(c());
Promise.then()回调异步性
var p1 = new Promise(function(resolve, reject) {
resolve("success");
});
p1.then(function(val) {
console.log(val);
});
console.log("which one is called first ?");
success后执行;
.then()
语法：Promise.prototype.then(onFulfilled, onRejected);
对 promise添加onFulfilled 和 onRejected 回调，并返回一个新的Promise实例，且返回值将作为参数传入这个心的Promise的resolve函数
因此，可以使用链式写法。后一个回调函数，会等待前一个promise对象的状态发生变化，才会被调用
var promise = new Promise(function (resolve, reject) {
if (执行某些操作成功了) {
resolve({
name:'resolve'
});
}else {
//执行失败
reject({
name:'err'
});
}
})
promise.then(function(res){
//resolve时执行
},function(err){
//reject时执行
})
.catch()
.then(undefinedn,onRejected)的别名，用于指定发生错误时的回调函数
promise.then(function(data) {
console.log('success');
}).catch(function(error) {
console.log('error', error);
});
/*******等同于*******/
promise.then(function(data) {
console.log('success');
}).then(undefined, function(error) {
console.log('error', error);
});
.all()
var p = Promise.all([p1,p2,p3]);
该方法接受一个数组作参数，数组中对象均为promise实例(如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。
p 的状态由这三个promise实例决定。
p1,p2,p3 也是同时执行，不是顺序执行
当p1, p2, p3状态都变为fulfilled，p的状态才会变为fulfilled，并将三个promise返回的结果，按参数的顺序（而不是 resolved的顺序）存入数组，传给p的回调函数
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "one");
});
var p2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, "two");
});
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "third");
});
Promise.all([p1, p2, p3]).then(function (value) {
console.log('resolve', value);
}, function (error) {
console.log('reject', error); // => reject three
});
//约 3s 后
["first", "second", "third"]
当p1, p2, p3其中之一状态变为rejected，p的状态也会变为rejected，并把第一个被reject的promise的返回值，传给p的回调函数
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "one");
});
var p2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, "two");
});
var p3 = new Promise((resolve, reject) => {
reject("three");
});
Promise.all([p1, p2, p3]).then(function (value) {
console.log('resolve', value);
}, function (error) {
console.log('reject', error); // => reject three
});
reject three
.race()
该方法同样将多个Promise实例，包装成一个新的Promise实例
var p = Promise.race([p1,p2,p3]);
p1,p2,p3谁先有返回，p就返回它的返回
Promise.race 接收一个数组作参数，当P1,P2,P3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就发生改变，并将第一个改变状态的promise的返回值，传给p的回调函数
var p1 = new Promise(function(resolve, reject) {
setTimeout(reject, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log('resolve', value);
}, function(error) {
//not called
console.log('reject', error);
});
-------output-------
resolve two
当第一个promise对象变为resolve后，并不会取消其他promise对象的执行
reslove();
Promise.resolve('success');
等同于
new Promise(function(resolve){
resolve('success');
})
这个方法会让这个Promise对象立即进入resolve状态，并将结果success传递给then执行的onfulfilled回调函数
Promise.resolve('success').then(function(value){
console.log(value)
})
输出 Success
.reject()
Promise.reject(new Error('error'));
等同于
new Promise(function(resolve,reject){
reject(new Error('error'));
})
让Promise对象立即进入rejected状态，并将错误对象传递到执行的onRejected回调函数
注意点：
1. reject 和catch 的区别
promise.then(onfulfilled,onrejected)
在onFulfilled中发生异常的话，在onrejected中是捕获不到这个异常的
promise.then(onFulfilled).catch(onRejected)
.then中产生的异常可以在.catch中捕获
一般情况下，使用catch。
catch也可以用then表示
.catch === .then(null, onRejected)
2.如果then中抛出了错误，而没有catch，会一直保持rejected状态，直到catch了错误
function taskA() {
console.log(x);
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}
function finalTask() {
console.log("Final Task");
}
var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected)
.then(finalTask);
-------output-------
Catch Error: A or B,ReferenceError: x is not defined
Final Task