ES6学习-Promise

最新推荐文章于 2024-07-16 18:21:54 发布

原创最新推荐文章于 2024-07-16 18:21:54 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Promise #ES6

ES6学习专栏收录该内容

13 篇文章

订阅专栏

本文参考阮一峰的ECMAScript 6入门，介绍了Promise。它是异步编程解决方案，有三种状态，能避免回调函数嵌套。还阐述了其基本用法，包括构造实例、使用resolve和reject函数，以及then()和catch()方法的作用与使用方式。

说明：本文参考阮一峰的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) {

	})