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.fulfil: 满足状态,当我们主动回调了resolve()时,接口调用成功,就处于该状态,并且会回调.then()
3.rejcet: 拒绝状态,当我们主动回调了reject()时,接口调用失败,就处于该状态,并且会回调.catch()