提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

ES6 从入门到精通 # 19：Promise 对象的其它方法

对象 入门
2023-03-14 22:58:54 时间

说明

ES6 从入门到精通系列（全23讲）学习笔记。



resolve 跟 reject

能将现有的任何对象转换成 promise 对象

let p =new Promise(resolve => resolve("kaimo"));
console.log(p);
p.then(res => {
    console.log(res)
})


c753f04fd30748758be2d2ad9765d6c2.png


all

提供了并行的执行异步操作的行为，用于等资源都加载完了才进行操作，比如一些游戏等资源加载完才进行页面初始化。

let promise1 = new Promise((resolve, reject) => {});
let promise2 = new Promise((resolve, reject) => {});
let promise3 = new Promise((resolve, reject) => {});

let p4 = Promise.all([promise1, promise2, promise3]);

p4.then(() => {
    // 三个都成功才算成功
}).catch(err => {
    // 一个失败则失败
})



race

给某个异步请求设置超时时间，并且在超时之后执行相应的操作

例子：请求图片资源


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function requestImage(imgSrc) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = function() {
                    resolve(img);
                }
                img.src = imgSrc;
            })
        }
        function timeout() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject(new Error("图片请求超时"));
                }, 2000)
            })
        }

        Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res => {
            console.log(res)
            document.body.appendChild(res);
        }).catch(err => {
            console.log(err)
        })
    </script>
</body>
</html>



8d5e39ebf08b4f9fa629b6367ed4bd6d.png



下面模拟超时，f12 找到 network 选择 slow 3g，禁用缓存


230316a1b28741cb8467382a54384b56.png


finally

finally() 方法返回一个 Promise。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。


Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res => {
    console.log(res)
    document.body.appendChild(res);
}).catch(err => {
    console.log(err)
}).finally(() => {
    console.log("finally")
})


e59ce33ecc914c7585a4657637ff37c0.png















相关文章