说明:本文参考阮一峰的ECMAScript 6 入门
1.Promise的含义
Promise是异步编程的一种解决方案。简单来说,就是一个容器,里面装着未来才会结束的事件(通常是一个异步操作)结果。
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。这三种状态只能由异步操作的结果决定,其它任何操作都不能改变这种状态,也就是说异步操作结果一出,就不能改变,就好像承诺一样,一旦说出就不能改变,所以叫Promise(承诺)。
有了Promise对象,就能避免层层嵌套的回调函数。
2.基本用法
通过Promise构造函数,构造一个实例。
let promise = new Promise( function (resolve, reject) {
//...some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
})
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve函数的作用是,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;reject函数的作用是,在异步操作失败时调用,并将错误信息作为参数传递出去。
Promise实例生成以后,可以调用then()方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function (value) {
//success
}, function (error) {
//failure
})
then方法可以接受两个回调函数作为参数,第一个回调函数是promise对象的状态变为resolved时调用,第二个回调函数是promise对象的状态变为rejected时调用。其中,第二个函数可选,不一定非要提供。这两个回调函数都接受promise对象传出的值作为参数。
function timeout(ms) {
return new Promise((resolve, regect) => {
setTimeout(resolve, ms, 'done')
})
}
timeout(100).then((value) => console.log(value))
上面代码中,timeout方法表示返回一个promise对象,表示过一定时间操作完成后的返回结果。过了指定的时间(ms参数)以后,promise对象状态就会变成resolved,就会触发then方法返回的结果。
下面是一个操作用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.response)
} else {
reject(new Errpr(this.statusText))
}
const client = new XMLHttpRequest()
client.open("GET", url)
client.onreadyStatechange = handler
client.responseType = "json"
client.setRequestHeader("Accept", "application/json")
client.send()
}
})
return promise
}
getJSON("/post.json").then(function (json) {
console.log('Contents: ' + json)
}, function (err) {
console.log('出错了: + error')
})
上面代码中。getJSON是对获取json数据的HTTP请求的封装,并返回一个promise对象。可以看到,在getJSON的内部,resolve函数和reject函数调用时,都带有参数。
如果resolve和reject函数被调用时带有参数,那么它们的参数会传给回调函数。
3.Promise.prototype.then()
Promise实例,具有then方法,它的作用是为Promise实例添加状态改变时的回调函数。前面说姑婆,then方法的第一个参数时resolved状态时的回调函数,第二个参数(可选)是rejected状态时的回调函数。
then方法返回的是一个新的Promise实例(并不是原来的那个Promise实例),因此可以采用链式写法(即then方法后面再调用另一个then方法)。
getJSON("/post.json").then(function(json){
return json.post
}).then(function(){
})
上面代码,使用then方法依次指定了两个回调函数。第一个回调函数执行完后,会将返回的结果作为第二个回调函数的参数。
4.Promise.prototype.catch()
catch方法是.then(null, rejection) 或.then(undefined, rejection)方法的别名,用来指定发生错误时的回调函数。
getJSON(/post.json).then(function (post) {
}).catch(function (error) {
console.log("出错了:" + error)
})
上面代码中。getJSON返回的是一个promise对象,如果该对象状态为resolved状态,则会调用then方法指定的回调函数,如果该对象状态为rejected状态,则会调用catch
方法指定的回调函数,处理着个错误。
一般来说,不要在then方法里面定义rejected状态的回调函数(then方法的第二个参数),总是使用catch方法。
//bad
promise.then(function (data) {
}, function (error) {
})
//good
promise
.then(function (data) {
})
.catch(function (error) {
})