Promise
1.什么是Promise
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果（通常是一个异步操作）。
从语法上说，Promise就是一个对象，从它可以获取异步操作的消息。
Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
2.Promise对象的两个特点：
1）对象的状态不受外界影响
Promise对象代表一个异步操作，有三种状态：进行中 已成功 已失败 （pending fulfilled rejected）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
（这也是Promise名称的由来，他的应为意思就是承诺，表示其他手段无法改变。）
2）一旦状态改变，就不会在变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：从 进行中 变为 已成功；从 进行中 变成 已失败。
只要两种情况发生，状态就凝固了，不会在变了，会一直保持这个结果，这时就称为resolved（已定型）。
如果改变已经发生了，你在对Promise对象添加回调函数，也会立即得到这个结果。
这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
3.Promise基本用法
Promise对象是一个构造函数，用来生成Promise实例。
const promise=new Promise(function(resolve,reject){
if(/*异步操作成功*/){
resolve(value)
}else{
reject(error)
}
})
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用，将Promise对象的状态从“未完成”变为“失败”，在异步操作成功时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法指定resolved状态和rejected状态的回调函数。
promise.then(
function(value){},
function(error){}
)
eg:下面是一个Promise对象的简单例子。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done')
})
}
timeout(100).then(
function (value) {
console.log(value)
}, function (error) {
}
)
上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。
过了指定（ms参数）时间以后，Promise实例的状态变为了resolved，就会触发then方法绑定的回调函数。
Promise新建后就会立即执行。
let promise = new Promise(function (resolve, reject) {
console.log('Promise');
resolve();
})
promise.then(function () {
console.log("resolved");
}
)
console.log("hi")
上面代码中，Promise新建后立即执行，所以首先输出的是Promise。
然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
下面是异步加载图片的例子
function loadImageAsync(url) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = function () {
resolve(image)
};
image.onerror = function () {
reject(new Error('Could not load image at ${url}'))
};
image.src = url;
});
}
用Promise对象实现的Ajax操作的例子
const getJSON = function (url) {
const promise = new Promise(function (resolve, reject) {
const handler = function () {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.respnse)
} else {
reject(new Error(this.statusText))
}
};
const client = new XMLHttpRequest();
client.open('get', url)
client.onreadystatechange = handler;
client.responseText = 'json'
client.setRequestHeader('Accept', 'application/json')
client.send();
})
return promise;
}
getJSON('/post.json').then(function (json) { }, function (error) { })
上面的代码中，getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的http请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。
如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。
reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值意外，还可能是另一个Promise实例，比如下面这样：
const p1=new Promise(function(resolve,reject){
///
})
const p2=new Promise(function(resolve,reject){
resolve(p1)
})
p1 p2都是Promise的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => { console.log(result) },error =>{ console.log(error)})
// .catch(error => console.log(error))
上面代码中，p1是一个Promise，3秒后变为rejected。
p2的状态在1秒后改变，resolve方法返回的是p1。
由于p2返回的是两一个Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以后面then语句都变成了针对p1。又过了两秒，p1遍为rejected,导致触发catch方法指定的回调函数。
⚠️ 调用resolve或reject并不会终结Promise的参数函数的执行。
new Promise((resolve,reject)=>{
reslove(1)
console.log(2)
}).then(r=>{
console.log(r)
})
// 2 1
上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。
这是因为 立即resolved的promise是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。
⚠️ 一般来说，调用resolve或reject以后，Promise的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。
所以，最好在resolve和reject语句前面加上return，这样就不会有意外。
new Promise((resolve,reject)=>{
return resolve(1)
//后面的语句不会执行
console.log(2)
})
4.Promise.prototype.then()
Promise实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。
他的作用是为Promise实例添加状态改变时的回调函数。
then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数。
then方法返回的是个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后在调用另一个then方法。
getJSON("/posts.json").then(function(res){
return res.post
}).then(function(post){
});
//采用链式的then，可以指定一组按照按照次序调用的回调函数。这是，前一个会点杉树，有可能返回的还是一个promise对象（即异步操作），这后一个回调函数，就会等待改promise对象的状态发生变化，才会被调用。
getJSON("/post/1.json").then(function(post){
return getJSON(post.commentURL)
}).then(function(comments){
console.log(`resolved ${comments}`)
},function(err){
console.log(`rejected ${err}`)
})
第一个then方法指定了回调函数，返回的是另一个Promise对象。
第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。
如果采用箭头函数，
getJSON("/post/1.json").then(post=>getJSON(post.commetnURL)
).then(
comments=>console.log("resoved"+comments),
error=>console.log("rejected",err)
)
5.Promise.prototype.catch()
Promise.prototype.catch()方法是.then(null,rejection) 或 .then(undefinded,rejection)的别名，用于指定发生错误时的回调函数。
getJSON("/post/1.json").then(post=>getJSON(post.commetnURL)
).catch( function(error){
//处理get JSON和前一个回调函数运行时发生的错误
}
)
一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});
跟传统的try/catch代码块不同的是，如果没有使用catch()方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错，因为x没有声明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
console.log('everything is great');
});
setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123
上面代码中，someAsyncThing()函数产生的 Promise 对象，内部有语法错误。浏览器运行到这一行，会打印出错误提示ReferenceError: x is not defined，但是不会退出进程、终止脚本执行，2 秒之后还是会输出123。这就是说，Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。
