一、Promise 介绍
Promise 对象是一个代理对象（代理一个值），被代理的值在 Promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的 promise 对象 。 ------MDN
意思就是说，promise 可以把异步的操作用同步的方式表达。 我们知道用 XHR 对象发起多个异步请求的时候，无法保证响应返回的顺序，使用回调函数来控制响应顺序时会形成回调地狱，代码难以维护，而且容易出错，所以就有了 Promise 对象。
当时用 Promise 模式时，可以将未来才会发生的事作为一个任务保存，每个任务都含有一个状态（pending 或 fulfilled 或 rejected）。状态一经改变就不会再恢复。无论当前任务成功还是失败，任务链都不会终止，直到所有任务状态都改变，才会结束任务。
二、Promise 使用方法
1.resolve(),reject()分别对应 then(),.catch()
let promise = new Promise((resolve, reject) => {
reject()
//可以传参,如：resolve(1111)，那么.then的response可以接受这个参数。
//reject(2222)，那么.catch的error可以接受这个参数。
}
复制代码
2..then(),.catch(),分别对应 resolve(),reject()。
<script>
let promise = new Promise((resolve, reject) => {
reject(111)
})
promise.then(response => { //调用resolve()时执行
console.log('成功')
console.log(response) //控制台打印111
}).catch(error =>{
console.log('222') //如果promise实例调用reject()，控制台会输出222
})
</script>
复制代码
3.链式
function promise1(status){
return new Promise((resolve,reject) => {
if(status){
console.log('promise1 resolve')
resolve('promise1返回数据成功')
}
if(!status){
console.log('promise1 reject') //打印在控制台
reject('promise1返回数据失败') //reject()内的参数打印在出错信息里，
//.then或者.error接收参数之后，可以console.log(response),此时就会输出在控制台
}
reject(222)
})
}
function promise2(status){
return new Promise((resolve,reject) => {
if(status){
console.log('promise2 resolve')
resolve('promise2返回数据成功')
}
if(!status){
console.log('promise2 reject')
reject('promise2返回数据失败')
}
reject(222)
})
}
function promise3(status){
return new Promise((resolve,reject) => {
if(status){
console.log('promise3 resolve')
resolve('promise3返回数据成功')
}
if(!status){
console.log('promise3 reject')
reject('promise3返回数据失败')
}
reject(222)
})
}
promise1(true)
promise1(false).then(response => {//单独调用
console.log(response)
}).catch(error => {
conlole.log(err)
})
promise1(false).then(response => {//链式调用
console.log(response)
return promise3(true)
}).then(response => {
console.log(response)
return promise2(false)
}).catch(error => {
console.log(error)
}).catch(error => {
conlole.log(err)
})
复制代码
4..all()数组内有 promise，必须全部成功才会执行.then 回调，有一个不成功就会执行.catch
Promise.all([promise1(true),promise2(true),promise3(false)]).then(response => {
console.log('全部调用成功')
}).catch(error => {
console.log('没有全部调用成功')
})
复制代码
.race(),数组内遇到返回结果为 resolve 就会继续链式执行，即只要有一个是 resolve，就代表成功，但是如果第一个 promise 结果是 reject，则失败。
Promise.race([promise1(true),promise2(true),promise3(false)]).then(response => { console.log('全部调用成功')}).catch(error => { console.log('没有全部调用成功') })
Promise.race([promise1(false),promise2(true),promise3(false)]).then(response => { console.log('全部调用成功')}).catch(error => { console.log('没有全部调用成功') })
复制代码
评论