欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javaScript中的Promise对象语法、常用方法实例讲解

程序员文章站 2022-03-31 22:49:22
promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。 语法: new promise( function(resolve, reject) {...} /* exe...

promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

语法:

new promise( function(resolve, reject) {...} /* executor */  );

参数:

resolve和reject两个函数作为参数,这两个函数是promise自带的不用我们再定义

常用方法:

promise.reject(reason) :

返回一个状态为失败的promise对象,并将给定的失败信息传递给对应的处理方法

promise.resolve(value):

返回一个状态由给定value决定的promise对象。如果该值是一个promise对象,则直接返回该对象;如果该值是thenable(即,带有then方法的对象),返回的promise对象的最终状态由then方法执行决定;否则的话(该value为空,基本类型或者不带then方法的对象),返回的promise对象状态为fulfilled,并且将该value传递给对应的then方法。通常而言,如果你不知道一个值是否是promise对象,使用promise.resolve(value)来返回一个promise对象,这样就能将该value以promise对象形式使用。

promise.prototype.catch(onrejected):

添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise。当这个回调函数被调用,新 promise 将以它的返回值来resolve,否则如果当前promise 进入fulfilled状态,则以当前promise的完成结果作为新promise的完成结果.

promise.prototype.then(onfulfilled, onrejected):

添加解决(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise, 将以回调的返回值来resolve.

注意:

1、promise构造函数执行时立即调用executor 函数

2、当我们调用reject: promise的状态自动变为rejected(失败)

3、当我们调用resolve: promise的状态自动变为fulfilled(完成)

promise的状态:

1、pending: 初始状态,既不是成功,也不是失败状态。

2、fulfilled: 意味着操作成功完成。

3、rejected: 意味着操作失败。

promise工作流程:

1、创建promise(pending状态)

var pro = new promise((resolve,reject) => {
/.....异步操作,比如xmlhttpreauest fetch 这样的ajax操作/
})

2、一般我们会在executor函数内部执行我们的异步操作,一旦完成,可以调用resolve()或者rejected()函数并传递相应成功或者失败的数据信息。

3、promise对象的then方法被调用,then根据前面是调用的是resolve还是rejected来决定调用then方法中的onfulfilled(成功)或者onrejected(失败)注意这两个是我们自己定义好的方法

4、promise中即使前面有catch,仍然可以继续使用.then或者.catch继续链式调用

例子:

	function myasyncfunction (url) {
		return new promise((resolve, reject) => { // return一个promise
			const xhr = new xmlhttprequest()
			xhr.open('get', url)
			xhr.onload = () => resolve(xhr.responsetext) // 成功调用  
			xhr.onerror = () => reject(xhr.statustext) // 失败调用
			xhr.send()
		})
	}
	myasyncfunction(url).then(successresponse => {}, failedresponse => {})

容易混淆的地方:

1、promise是我们new出来的第一个,promise是后面我们调用resolve或者reject时返回的

2、promise 不论成功或失败都会调用 then

3、catch() 只有当 promise 失败时才会调用 注意catch(failurecallback) 是 then(null, failurecallback) 的缩略形式

.then里的方法是异步调用的:

例子:

	new promise((resolve, reject) => {
		console.log('start')
		resolve("step1")
	}).then((result) => {
		console.log(result)
	})
	console.log('=========')

结果是:

start

=========

step1