目录
概念
promise其实是异步(async)请求的处理方案,应用于对数据的请求做响应
Promise的基本使用
const promise = new Promise((resolve, reject) => {
})
promise.then((res) => {
// 请求成功的回调函数
console.log("res")
}, (err) => {
// 请求失败的回调函数
console.log("err")
})
解析上图:new出了一个Promise实例------promise,此时的Promise构造函数的起始函数(也就是(resolve, reject))携带了两个形参,当Promise被构造时,这个起始函数会被异步直接运行的,如:
const promise = new Promise((resolve, reject) => {
console.log("我被执行了")
})
程序会直接打印"我被执行了"
我们不难发现第一张图可以进行简化书写成:
new Promise((resolve, reject) => {
console.log("我被执行了")
}).then(res => { // ES6语法:当箭头函数前面的参数只有一个时,可以省略括号
// 请求成功的回调函数
console.log(res)
}, err => {
// 请求失败的回调函数
console.log(err)
})
Promise的代码结构
上述实例的执行过程中,可以划分为三个状态:
- pending 初始状态(在等待中,既没被兑现,也没有被拒绝)
- fulfilled 已兑现 也就是执行了请求成功的回调函数
- rejected 已拒绝 也就是执行了请求失败的回调函数
Promise的对象方法(三种)
1.then() 接收两个参数:fulfilled的回调函数、rejected的回调函数,也就是then方法能将参数中的函数添加到Promise的正常执行序列当中
- Promise是能够被多次调用then(),如:
<script>
const promise = new Promise((resolve, reject) => {
resolve("我被调用了几次就显示几次")
})
promise.then(res => {
console.log(res)
})
promise.then(res1 => {
console.log(res1)
})
promise.then(res2 => {
console.log(res2)
})
</script>
// 打印结果
我被调用了几次就显示几次
我被调用了几次就显示几次我被调用了几次就显示几次
- then()本身的返回值就是一个Promise
<script>
const promise = new Promise((resolve, reject) => {
resolve("我是原来的")
})
promise.then(res => {
return "我会返回一个新的Promise"
}).then(res => {
console.log(res)
})
</script>
打印:我会返回一个新的Promise
// 可见then()返回的是一个新的Promise,最终状态由新的Promise决定
2.catch() 是Promise用来捕获进程错误或异常的序列,只要then()依次传入的函数程中发现有任何的异常,都会直接跳到catch(),可将异常抛出。
注意:catch()返回的也是一个新的Promise
<script>
const promise = new Promise((resolve, reject) => {
resolve("此时我发现了序列中的函数异常并移交给carch方法去抛出")
})
promise.then(res => {
throw new Error("then error")
}).catch(err => {
console.log(err)
})
</script>
打印结果:Error: then error // 并非报错
3.finally() 是ES9新增的一个特性,无论Promise的状态是fulfilled状态或是rejected状态,它最终都会去执行
<script>
const promise = new Promise((resolve, reject) => {
resolve("我是成功的")
// reject("我是异常的")
})
promise.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
}).finally(() => {
console.log("我是不需要带参数的")
})
</script>
// 我是成功的
// 我是不需要带参数的
Promise的类方法(六种)
场景一:当你想将对象转成Promise,可以使用ES6提供的resolve()
<script>
const promise = Promise.resolve({
studentName: "张三"
})
promise.then(res => {
console.log(res)
})
</script>
场景二:直接返回一个拒绝值,reject()
<script>
const promise = Promise.reject("rejected: error")
promise.then(res => {
console.log(res)
}).catch(err => {
consloe.log(err)
})
</script>
场景三:当你需要等Promise的状态都为fulfilled时,拿到总的结果(项目较为常用)all()
<script>
// 通过计数器展示
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("1s")
}, 1000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("2s")
}, 2000)
})
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("3s")
}, 3000)
})
Promise.all([promise1, promise2, promise3]).then(res => {
console.log(res)
})
</script>
此时等待3s即可打印全部结果
若其中有一个是异常的,则使用all方法会只抛出这个异常结果
场景四:弥补all方法不能在出现某个异常时就会直接catch()的不方便,allSettled()会拿到最终全部结果,不论状态时fulfilled还是rejected
<script>
// 通过计数器展示
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("1s") // 这里出现了异常
}, 1000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("2s")
}, 2000)
})
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("3s")
}, 3000)
})
Promise.allSettled([promise1, promise2, promise3]).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
</script>
场景五:race() 只要有一个是fulfilled状态的,立刻返回结果,不过如果最快那个刚好是异常,那么会出现只抛出异常
<script>
// 通过计数器展示
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("1s")
}, 1000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("0.5s") // 这里最快,只打印最快
}, 500)
})
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("3s")
}, 3000)
})
Promise.race([promise1, promise2, promise3]).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
</script>
场景六:any() 必须等到有一个fulfilled状态才结束,如果都是异常也会全部序列都执行并执行catch()
与上述相似就不再演示,这篇文章就到这里,觉得有帮助的就点个赞吧~