Promise 含义

Promise 是异步编程的一种解决方案，比传统的回调更加合理而其人强大。

Promise，简单来说，是一个容器，里面存放着某个未来才会结束的事件的结果。Promise是一个对象，用来获取异步操作的消息。

Promise有以下两个特点：

1 对象状态不受外界影响。

有三种状态：Pending（进行中），Fulfilled（已成功），Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何操作都无法改变这个状态。

2 一旦改变，不会再变，任何时候都可以得到这个结果。

Promise对象的状态改变只有两种可能：从Pending 到 Fulfilled 或者 从Pending 到 Rejected。只要这两种情况发生，状态就会凝固，不会再变，一直保持这个结果。这时就称为 Resolved（已定型）。就算改变已经发生，再对Promise添加回调函数，也会得到这个结果。 这与事件（event）完全不同，事件的特点就是：如果错过了，再去监听是得不到结果的。

Promise 缺点：

1 无法取消。一旦建立就会立即执行，无法中途取消。

2 如果不设置回调函数，Promise内部报错不会抛出到外面。

3 当处于Pending状态，无法得知目前进展到哪一阶段（是刚刚开始，还是即将完成？）

基本用法

var promise = new Promise((resolve,reject) => {// ...if(/* .....*/) {resolve(value)} else {reject(error)}
})
复制代码

resolve作用是将Promise状态由 未完成编程成功，在异步操作成功时调用，并将异步操作结果作为参数传播出去。

reject函数作用是，将Promise状态从未完成变为失败，在异步操作失败时调用，并将异步操作失败报出的错误传递出去。

Promise 实例生成后，可以调用then，指定 resolved 和 rejected 状态的回调函数。

promise.then(function(val){// success
}, function(error) {// failure
})
复制代码

then方法接受两个回调函数作为参数。第一个是 Promise 对象的状态变为Resolved时调用，第二个回调是Promise变为Rejected时调用。第二个函数时可选的。

function timeout(ms){return new Promise((resolve,reject) => {setTimeout(resolve,ms,'done')})
}
timeout(100).then((value) => {console.log(value)
})
复制代码

Promise 新建好之后就会立即执行。

let promise = new Promise(function(resolve,reject) {console.log('Promise');resolve();
})promise.then(function(){console.log('Resolved')
})console.log('Hi')
// Promise
// Hi
// Resolves
复制代码

异步加载图片：

function loadImgAsync(url) {return new Promise(function(resolve,reject) {var img = new Image()img.onload = function(){resolve(img)}img.onerror = function(){reject(new Error('Could not load img at ' + url))}img.src = url})
}
复制代码

promise 实现 AJAX

var getJSON = function (url) {var promise = new Promise((resolve,reject)=> {var client = new XMLHttpRequest()client.open('GET',url)client.onreadystatechange = handleclient.responseType = 'json'client.setRequestHeader("Accept","application/json")client.send()function handler(){if(this.readyState!==4){return }if(this.status == 200){resolve(this.response)} else {reject(new Error(this.statusText))}}})return promise;
}getJSON("/post.json").then((json)=>{console.log('Contents ' + json)
}, function(error){console.log(error)
})
复制代码

var p1 = new Promise(function (resolve,reject){setTimeout(()=>{reject(new Error('fail'),3000)})
})var p2 = new Promise(function(resolve,reject){setTimeout(()=>{resolve(p1)},1000)
})p2
.then(rsult => console.log(result))
.catch(error => console.log(error))
// Error: fail
复制代码

一般来说，调用resolve 或者 reject 以后，Promise的使命就已经完成了，后面的操作应该放到 then ，而不应该直接写到 resolve 或者 reject 后面，所以最好在它们之前 添加 return 语句，这样就不会产生意外。

new Promise((resolve,reject) => {return resolve(1);// 后面不会执行console.log(2)
})
复制代码

Promise.prototype.then()

Promise实例具有 then 方法，作用是 为 Promise 实例添加状态改变时的回调函数。

then 方法 返回一个新的 Promise 实例（不是原来那个Promise），因此 可以使用 链式写法，then 后面 再 添加 另外一个 then。

getJSON("/posts.json").then(function(json){return json.post
}).then(function(post){// ...
})
复制代码

链式调用的 then 可以指定 一组按照次序调用的回调函数。 前一个回调函数可能返回的还是一个Promise，后一个回调函数就会等待该Promise 对象的状态发生变化，在被调用。

getJSON("/post/1.json").then(function(post){return getJSON(post.commentUrl)
}).then(function funcA(comments) {console.log("resolved")
},function funcB(error){console.log(error)
})
复制代码

Promise.prototype.catch()

这个方法 是 .then(null, rejection) 的别名，指定发生错误时的回调。

getJSON('/posts.json').then(function(posts){// ...
}).catch(function(error){console.log("error " + error )
})
复制代码

Promise 在 resolve 语句之后 抛出错误，并不会被捕获，等于没有抛出。因为Promise状态一旦发生改变，就会永久保存这个状态，不会改变了。

Promise 对象错误具有“冒泡”性质，会一直向后传递，直到捕获到为止，错误总会被下一个catch捕获

一般不要在 then 方法中定义 Rejected 状态的回调函数，而应总是使用catch方法。

var someAsyncThing = function(){return new Promise((resolve,reject)=>{// 报错 x 未声明resolve(x + 2)})
}
someAsyncThing().then(()=>{return someotherAsyncThing()
}).catch(error => {console.log('oh no' , error)// 报错 y 没有声明y + 2
}).then(()=>{console.log('carry on')
})
// oh no [ReferenceError: x is not defined ]
复制代码

catch方法抛出一个错误，后面如果没有catch，导致这个错误不会被捕获，也不会传递到外层。

可以用 第二个 catch 方法捕获 前一个catch 方法抛出的错误。

someAsyncThing().then(()=>{return someotherAsyncThing()
}).catch(error => {console.log('oh no' , error)// 报错 y 没有声明y + 2
}).catch(error=>{console.log('carry on ', error)
})
复制代码

Promise.all()

将多个 Promise 实例 包装成一个新的 Promise实例。

var p = Promise.all([p1, p2, p3])

p 状态 由 p1，p2，p3 决定，分两种情况。

1 只有p1，p2，p3 状态都变成 fulfilled ，p 的状态 才会变成 fulfilled，此时 p1，p2，p3 返回值组成一个数组，传递给 p 的回调。

2 只要 p1，p2，p3 有一个被Rejected，p 状态也会变成 Rejected，此时，第一个被 Rejected 的实例返回值会传递给p的回调函数。

var promises = [2,3,5,7,11,13].map(function(id) {return getJSON('/post/'+id+'.json')
})promise.all(promises).then(posts=>{//...
}).catch(reason=>{//...
})
复制代码

另一个例子

const databasePromise = connectDatabase()
const bookPromise = databasePromise.then(findAllBooks)
const userPromise = databasePromise.then(getCurrentUser)
Promise
.all([bookPromise,userPromise])
.then(([books,user])=>{//...
})
复制代码

如果作为参数的Promise自身定义了catch方法，那么被rejected大时并不会触发 Promise.all 的 catch 方法

Promise.race()

var p = new Promise.race([p1,p2,p3])
复制代码

只要 p1,p2,p3中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise 实例 返回值就是传递给p 的回调函数。

const p = Promise.race([fetch('/xxx'),new Promise((resolve,reject)=>{setTimeout(()=>{reject(new Error('time out'))},5000)})
])
p.then(res=>{console.log(res)
})
.catch(error => {console.log(error)
})
复制代码

附加方法

done()

无论Promise对象的回调链以then方法还是catch结尾，最后一个方法抛出的错误都可能无法捕捉到（Promise内部的错误不会冒泡的全局）因此，提供一个 done 方法，总是处于回调链尾端，保证抛出任何可能的错误。

asyncFunc()
.then()
.catch()
.then()
.done()
复制代码

实现

Promise.prototype.done = function(onFulilled, onRejected){this.then(onFulilled, onRejected).catch(function(resason){setTimeout(() => {throw reason},0)})
}
复制代码

finally()

finally方法用于指定不管Promise对象最后状态如何都会执行的操作。与 done 最大的区别在于 他接受一个不普通的回调函数作为参数，该函数不管怎样都必须执行。

实现

Promise.prototype.finally = function(callback){let P = this.constructotrreturn this.then(value => P.resolve(callback()).then(()=>value),reason => P.resolve(callback()).then(()=> {throw reason}))
}
复制代码