当前位置：首页 > article >正文

Vue学习笔记(十一)

article 2024/11/6 11:01:11

一. Promise

1. 异步

异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。

2. 回调函数

当一个函数作为参数传入另一个函数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数.

<script>
    setTimeout(() => {
        console.log(`执行了回调函数`)
    }, 3000)
</script>

这里的回调函数是() => {console.log( 执行了回调函数 )}，在满足时间3秒后执行。

3. 异步函数

<script>
    setTimeout(() => {
        console.log(`执行了回调函数`)
    }, 3000)
    console.log(`111`)
</script>

如果按照代码编写的顺序，应该先输出“执行了回调函数”，再输出“111”。但实际输出为

111
执行了回调函数

这种不阻塞后面任务执行的任务就叫做异步任务。

4. 地狱回调

根据前面可以得出一个结论：存在异步任务的代码，不能保证能按照顺序执行，那如果非要代码顺序执行呢？
比如要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。
必须要这样操作，才能保证顺序正确：

<script>
        setTimeout(() => { //第一层
            console.log(`武林要以和为贵`)
            setTimeout(() => { //第二层
                console.log(`要讲武德`)
                setTimeout(() => { //第三层
                    console.log(`不要搞窝里斗`)
                }, 1000)
            }, 2000)
        }, 3000)
</script>

可以看到，代码中的回调函数套回调函数，套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。
当异步操作想要有顺序时，只能在一个异步成功以后的回调函数里面嵌套另一个异步的操作，如果嵌套的层数过多就形成了回调地狱
回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。
那该如何解决回调地狱呢？使用Promise对象

5. 什么是Promise

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果

6. 为什么要使用Promise

最重要也是最主要的一个场景就是ajax和axios请求。通俗来说，由于网速的不同，可能得到返回值的时间也是不同的，但是下一步要执行的代码依赖于上一次请求返回值，这个时候就需要等待，结果出来了之后才知道怎么样继续下去.

7. Promise特点

Promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
Promise并未剥夺函数 return 的能力，因此无需层层传递callback，进行回调获取数据
Promise代码风格，容易理解，便于维护
Promise多个异步等待合并便于解决

8. 创建Promise

8.1 通过Promise构造函数

<script>
        //两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己传参
        //resolve将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
        //reject将Promise对象的状态从“未完成”变为“失败”, 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
        const myPromise = new Promise((resolve, reject) => {
            //setTimeout模拟耗时操作（3秒后执行）
            setTimeout(() => {
            //获取随机值，范围[0,1)
            const random = Math.random()
            if (random > 0.5) {
                resolve(`成功`)
            } else {
                reject(`失败`)
            }
            }, 3000)
        })
        console.log(`output->myPromise`, myPromise)
        //then函数处理Promise的成功状态的回调函数
        //catch函数处理Promise的失败状态的回调函数
        myPromise.
        //res的值为resolve函数的实参值
        then((res) => {
        console.log(`output->res`, res)
        console.log(`output->myPromise`, myPromise)
        }).
        //err的值为reject函数的实参值
        catch((err) => {
        console.log(`output->err`, err)
        console.log(`output->myPromise`, myPromise)
        })
</script>

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己传值。

resolve作用：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise对象的状态不受外界影响（3种状态）：
1. pending[待定]初始状态
2. fulfilled[实现]操作成功
3. rejected[被否决]操作失败
  当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；promise状态一经改变，不会再变。
一旦状态改变就不会再变（两种状态改变：成功或失败）：
1. 从pending变为fulfilled（成功）
2. 从pending变为rejected（失败）
3. 这两种情况只要发生，状态就凝固了，不会再变了。

获取用户信息案例：

<script>
        //定义getUserInfo方法
        const getUserInfo = (userId) => {
            return new Promise((resolve, reject) => {
                //模拟耗时操作
                setTimeout(() => {
                const random = Math.random()
                if (random > 0.5) {
                    const user = { id: userId, name: 'jack', age: 30 }
                    // 如果存在，使用resolve方法将Promise状态变为成功态
                    resolve(user)
                } else {
                    // 如果不存在，使用reject方法将Promise状态变为失败态
                    reject('用户不存在')
                }
                }, 4000)
            })
        }
        //调用getUserInfo方法
        getUserInfo('001').
        //成功回调处理
        then((res) => {
            console.log(`output->获取用户成功，用户信息为：`, res)
        }).
        //失败回调处理
        catch((err) => {
            console.log(`output->err`, err)
        })
</script>

在该案例中，使用Promise手动管理异步操作。在getUserInfo函数中创建了一个Promise对象，将异步操作封装在其中，当异步操作执行成功时，使用resolve方法将Promise状态变为成功态，并传递用户信息，当异步操作执行失败时，使用reject方法将Promise状态变为失败态，并传递错误信息。使用then方法和catch方法分别处理Promise的状态变化，如果Promise状态变为成功态，将打印用户信息，如果Promise状态变为失败态，将打印错误信息。

8.2 通过静态方法创建Promise对象

此方式也称为Promise的自动化管理方式。比如，Promise.resolve()可以创建一个状态为成功的Promise对象，Promise.reject()可以创建一个状态为失败的Promise对象。

案例1:

<script>
        //Promise.resolve()和Promise.reject() 方法创建Promise对象
        const myPromise1 = Promise.resolve(`成功`)
        const myPromise2 = Promise.reject(`失败`)
        myPromise1.then((res) => {
            console.log(`output->res`, res)
        })
        myPromise2.catch((err) => {
            console.log(`output->err`, err)
        })
</script>

案例2:

<script>
        // 模拟一个异步操作函数
        const asyncFn = () => {
            return new Promise((resolve, reject) => {
                // 模拟一个异步操作，2秒钟后将结果返回
                setTimeout(() => {
                const random = Math.random()
                if (random > 0.5) {
                    resolve(`success`);
                } else {
                    reject(`fail`)
                }
                }, 2000)
            })
        }
        // 返回一个已解决的Promise对象，并使用函数返回值作为解决结果
        Promise.resolve(asyncFn()).then((value) => {
            console.log(`异步操作执行成功`, value)
            // 在这里处理异步操作执行成功的情况
        }).catch((error) => {
            console.log(`异步操作执行失败`, error)
            // 在这里处理异步操作执行失败的情况
        })
</script>

在这个例子中，定义了一个asyncFn函数，该函数返回一个Promise对象，在Promise对象的构造函数中使用setTimeout模拟了一个异步操作。然后我们使用Promise.resolve()方法将异步操作函数的返回值转换成一个自动管理状态的Promise对象。最后，在使用Promise.resolve()方法返回的Promise对象上使用then()方法和catch()方法处理异步操作成功或失败的情况。

使用Promise.resolve()方法的好处在于，如果被传入的参数本来就是一个Promise对象，那么直接返回这个Promise对象，如果不是Promise对象，会自动转换成Promise对象，方便在异步操作逻辑中使用。

8.3 Promise对象的链式操作

<script>
        // 模拟一个异步操作函数
        const myPromise1 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise1成功')
                    } else {
                        reject('myPromise1失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise2 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise2成功')
                    } else {
                        reject('myPromise2失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise3 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise3成功')
                    } else {
                        reject('myPromise3失败')
                    }
                }, 2000)
            })
        }

        myPromise1().then((res1) => {
            console.log(`output->res1`,res1)
            return myPromise2()
        }).catch((err1) => {
            console.log(`output->err1`,err1)
            return myPromise2()
        }).then((res2) => {
            console.log(`output->res2`,res2)
            return myPromise3()
        }).catch((err2) => {
            console.log(`output->err2`,err2)
            return myPromise3()
        }).then((res3) => {
            console.log(`output->res3`,res3)
        }).catch((err3) => {
            console.log(`output->err3`,err3)
        })

        //只有一个catch，链条中所有的Promise对象有一个reject被执行，那么就直接执行最后的catch回调处理
        myPromise1().then((res1) => {
            console.log(`output->res1`,res1)
            return myPromise2()
        }).then((res2) => {
            console.log(`output->res2`,res2)
            return myPromise3()
        }).then((res3) => {
            console.log(`output->res3`,res3)
        }).catch((err) => {
            console.log(`output->err`,err)
        })
</script>

then()返回一个新的Promise实例，所以它可以链式调用
如果返回新的Promise，那么下一级.then()会在新的Promise状态改变之后执行

8.4 Promise中断

Promise 的特性就是：不能中断。
一旦执行无法知道它具体执行到哪里了，只知道在 pending，最后 resolve 或者 reject 才知道执行完毕。
Promise可以通过在流程中使用 throw 来中断流程触发catch操作，也可以在某一个节点进行 reject来中断操作它的链式调用的then函数。所以在链式调用的过程中是完全可以实现中断操作的。
同步的中断Promise

<script>
        const someAsyncFn = () => {
            return new Promise(function(resolve, reject) {
                // 在这里写异步代码
                setTimeout(() => {
                    throw new Error('强行中断，抛出异常')
                    const random = Math.random()
                    if (random > 0.5) {
                        resolve('someAsyncFn异步操作成功')
                    } else {
                        reject('someAsyncFn异步操作失败')
                    }
                }, 2000)
                // throw new Error("The promise was interrupted")
                reject(new Error("The promise was interrupted"))
            })
        }

        someAsyncFn().then((res)=> {
            console.log(res)
        }).catch((err) => {
            console.log(err)
        })
</script>

Promise 封装异步请求，中断操作

<script>
        const someAsyncFn = () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random();
                    if (random > 0.5) {
                        resolve(`someAsyncFn异步操作成功`);
                    } else {
                        reject(`someAsyncFn异步操作失败`);
                    }
                }, 4000);
            });
        };

        const timeoutWrapper = (p, timeout = 2000) => {
            const wait = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject(`请求超时`);
                }, timeout);
            });
            return Promise.race([p, wait]);
        };

        timeoutWrapper(someAsyncFn()).then((res) => {
            console.log(res);
        }).catch((err) => {
            console.log(err);
        });
</script>

9. Promise 常用静态方法

9.1 Promise.all() 批量执行

Promise.all([p1, p2, p3])用于将多个Promise实例，包装成一个新的Promise实例，返回的实例就是普通的Promise，它接收一个数组作为参数数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值的数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

<script>
        // 模拟一个异步操作函数
        const myPromise1 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise1成功')
                    } else {
                        reject('myPromise1失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise2 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise2成功')
                    } else {
                        reject('myPromise2失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise3 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise3成功')
                    } else {
                        reject('myPromise3失败')
                    }
                }, 2000)
            })
        }

        Promise.all([myPromise1(), myPromise2(), myPromise3()]).then((res) => {
            console.log('all', res)
        }).catch((err) => {
            console.log('all', err)
        })
</script>

9.2 Promise.allSettled() 批量执行

用来确定一组异步操作是否都结束了（不管成功或失败），包含了”fulfilled“和”rejected“两种情况。
当有多个彼此不依赖的异步任务成功完成时，或者总是想知道每个子Promise的结果时，通常使用它。
相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。

<script>
    // 模拟一个异步操作函数
        const myPromise1 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise1成功')
                    } else {
                        reject('myPromise1失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise2 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise2成功')
                    } else {
                        reject('myPromise2失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise3 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise3成功')
                    } else {
                        reject('myPromise3失败')
                    }
                }, 2000)
            })
        }

        Promise.allSettled([myPromise1(), myPromise2(), myPromise3()]).then((res) => {
            console.log('all', res)
        }).catch((err) => {
            console.log('all', err)
        })
    </script>

对于每个结果对象，都有一个 status 字符串。如果它的值为 fulfilled，则结果对象上存在一个 value。如果值为 rejected，则存在一个 reason 。value（或 reason ）反映了每个 promise 决议（或拒绝）的值。

可以发现和all相比，allSettled在其中一个Promise返回错误时还可以继续等待结果。并且不管内部的计时器定时多少毫秒，它都会等所有结果返回后按照传参传入的顺序返回Promise结果

应用场景：
比如用户在页面上面同时填了3干个独立的表单，这三个表单分三个接口提交到后端，三个接口独立，没有顺序依赖，这个时候需要等到请求全部完成后给与用户提示表单提交的情况.

面试题：
共有四个接口，第一个接口是崩溃的，但是需要返回所有接口的结果。
这一题如果使用 all，那么会直接抛出错误，所以必须使用allSettled方法请求数据

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let a = axios.get("http://xxxa")
        let b = axios.get("http://xxxb")
        let c = axios.get("http://xxxc")
        let d = axios.get("http://xxxd")

        Promise.allSettled([a, b, c, d]).then((res) => {
            console.log(res)
        }).catch((err) => {
            console.log(err)
        })
</script>

9.3 Promise.race() 批量执行

Promise.race()方法同样是将多个子Promise实例包装成一个新的Promise实例，但是只要有一个子Promise 实例状态发生变化，就将新的Promise实例的状态改变，且终值由第一个完成的 Promise提供。

<script>
        // 模拟一个异步操作函数
        const myPromise1 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise1成功')
                    } else {
                        reject('myPromise1失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise2 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise2成功')
                    } else {
                        reject('myPromise2失败')
                    }
                }, 2000)
            })
        }

        // 模拟一个异步操作函数
        const myPromise3 =() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const random = Math.random()
                    if(random > 0.5) {
                        resolve('myPromise3成功')
                    } else {
                        reject('myPromise3失败')
                    }
                }, 2000)
            })
        }

        Promise.race([myPromise1(), myPromise2(), myPromise3()]).then((res) => {
            console.log('all', res)
        }).catch((err) => {
            console.log('all', err)
        })
</script>

应用场景：
Promise.race()方法也有许多实际使用场景。它可以用于处理需要快速获取结果的情况，例如，当向多个不同的服务器请求同一个资源时，可以使用Promise.race()方法来获取最快返回结果的服务器的响应，并忽略其他服务器的响应结果。或者，在一个Web应用程序中，需要在指定的时间内获取用户的同步输入和异步请求结果，可以使用Promise.race()方法同时监听用户输入事件和请求结果事件，一旦其中有一个事件触发，就可以立即返回响应结果，提高应用程序的响应速度和用户体验。另外，Promise.race()方法还可以用于处理超时情况，例如，在一个HTTP请求的响应时间超过一定时间后，可以使用Promise.race()方法将该请求和一个延迟一定时间的Promise实例包装起来，一旦有一个Promise进入fulfilled状态，就可以立即返回响应结果。如果请求在规定的时间内仍未返回，则将其取消并返回一个错误信息给用户，以提高应用程序的可用性和稳定性。

9.4 Promise.any() 批量执行

Promise.any()方法会对多个Promise进行竞争，直到有一个子Promise进入Fulfilled状态，Promise实例返回该Promise的结果。如果所有Promise都进入Rejected状态，则返回失败状态，其中维护Promise及其状态的任何提示返回数组都是必需的。
Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

<script>
            // 模拟一个异步操作函数
            const myPromise1 =() => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const random = Math.random()
                        if(random > 0.5) {
                            resolve('myPromise1成功')
                        } else {
                            reject('myPromise1失败')
                        }
                    }, 2000)
                })
            }

            // 模拟一个异步操作函数
            const myPromise2 =() => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const random = Math.random()
                        if(random > 0.5) {
                            resolve('myPromise2成功')
                        } else {
                            reject('myPromise2失败')
                        }
                    }, 2000)
                })
            }

            // 模拟一个异步操作函数
            const myPromise3 =() => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const random = Math.random()
                        if(random > 0.5) {
                            resolve('myPromise3成功')
                        } else {
                            reject('myPromise3失败')
                        }
                    }, 2000)
                })
            }

            Promise.any([myPromise1(), myPromise2(), myPromise3()]).then((res) => {
                console.log('all', res)
            }).catch((err) => {
                console.log('all', err)
            })
</script>

使用场景：
Promise.any()方法可以用于处理多种资源竞争的情况，例如，在一个抢单系统中，多个用户需要争夺同一个订单，系统将同时向多个用户发送请求，并使用Promise.any()方法监听所有请求的状态，一旦有一个用户成功抢到订单，系统就立即返回订单信息并发送通知给该用户，从而提高了用户的参与度和系统的可用性。除此之外，Promise.any()方法还可以用于指定默认值或备选方案，例如，在一个多语言网站中，需要从多个API获取多语言翻译结果，但有些API可能由于网络原因或其他问题无法正常工作，这时候就可以使用Promise.any()方法来一次性向多个API发送请求，并设置一个默认值或备选方案，一旦有一个API正常返回翻译结果，就立即返回结果给用户，如果所有API都无法正常工作，则返回默认值或备选方案。

查看全文

http://www.kler.cn/a/378154.html