Promise的基本使用，以及三种状态

文章目录

• 1.什么Promise
• 2.Promise的基本使用
• 3.如何用Promise请求多个接口
• 4.拿到所有请求接口数据再做操作：Promise.all()
• 5.Promise的三种状态

1.什么Promise

Es6有个非常好用的特性就是Promise,它是异步编程的一个解决方案，主要用来解决回调地狱。

什么情况下会使用Promise：

一般情况下是有异步操作时，会对Promise进行封装。

2.Promise的基本使用

首先用setTimeout模拟异步网络请求，接口数据在then()函数内处理

new Promise（resolve,reject）默认resolve，reject传入两个参数，这两个是Promise自带的函数对象。

从字面意思上来看就知道这两个对象的具体作用

resolve——成功：接口请求成功

reject ——拒绝：接口请求失败

ps:注意看注释

  new Promise((resolve,reject)=>{
   	   // 第一次网络请求
   	   setTimeout(()=>{
   		   resolve() //调用成功函数
   		   
   		   reject('error message') //调用失败
   	   },1000) 
   }).then(()=>{
   	   //调用成功后
   	   console.log('第一次调用成功')
   	   })
   }).catch((err)=>{
   		//调用失败后抓住错误信息
   	     console.log(err) //error message
   })

这样的一个then().catch()就是简单的链式调用

还有省略.catch（）写法 ,then()传入两个函数对象，第一个函数对象内写请求成功函数，第二个函数对象内写请求失败函数。

  new Promise((resolve,reject)=>{
   	   // 第一次网络请求
   	   setTimeout(()=>{
   		   resolve('调用成功')
   		   reject('error message') 
   	   },1000)
   	   
   }).then(data=>{
   		//请求成功
   	   console.log(data)  //调用成功
   	 
   
   },err=>{
   	 //请求失败
	   console.log(err)  //error message
   })

3.如何用Promise请求多个接口

在第一个接口调用成功后 创建一个新的Promise对象

ps：注意看注释

  new Promise((resolve,reject)=>{
	   // 第一次网络请求
	   setTimeout(()=>{
		   resolve() //调用成功
		   
		   reject('error message') //调用失败
	   },1000)
	   
   }).then(()=>{
	   console.log('第一次调用成功')
	   // 创建一个新的异步操作
	   return new Promise((resolve,reject)=>{
		   // 第二次网络请求
		   setTimeout(()=>{
		   		   resolve('第二次调用成功') //模拟接口传参 resolve括号内写返回data
		   },1000)
	   })
   }).then((data)=>{
	     console.log(data) //第二次调用成功
   })
   

4.拿到所有请求接口数据再做操作：Promise.all()

// 在all里写入多个请求
	Promise.all([
		// 第一个请求
		$ajax({
			url:'url1',
			success:function(data){
				resolve(data)
			}
		}),
		// 第一个请求
		$ajax({
			url:'url2',
			success:function(data){
				resolve(data)
			}
		}),
	]).then(results=>{
		// 在.then里同时处理两个请求接口返回的数据
		// results是一个数组对象，将接口1接口2的数据合并了 
		// results[0]:接口1返回数据，results[1]:接口2返回数据
	})
		

5.Promise的三种状态

1.pending ：等待状态，比如正在进行网络请求，或者定时器没有到时间的时候。

2.fulfill： 满足状态，当我们主动回调了resolve()时，接口调用成功，就处于该状态，并且会回调.then()

3.rejcet： 拒绝状态,当我们主动回调了reject()时，接口调用失败，就处于该状态，并且会回调.catch()

转载地址：Promise的基本使用，以及三种状态。_promise三种状态_蜻蜓队长—的博客-CSDN博客