【05问：Promise的理解与使用】

Eric⠀

已于 2024-07-01 21:13:40 修改

阅读量860

点赞数 29

分类专栏：前端面试三千问文章标签：前端 javascript 开发语言 vue.js

于 2024-06-28 22:15:14 首次发布

本文链接：https://blog.csdn.net/m0_73884922/article/details/140053604

版权

前端面试三千问专栏收录该内容

6 篇文章 0 订阅

订阅专栏

八、Promise.all 和 Promise.race

总结

一、什么是Promise

Promise 是异步编程的一种解决方案，Promise 很好地解决了回调地狱的问题，比传统的解决方案回调函数和事件更合理和更强大。
Promise是一个对象，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。流程更加清晰，代码更加优雅。

二、Promise的缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

三、Promise的实例有三个状态

Pending（进行中）
Resolved（已完成）
Rejected（已拒绝）

四、对于Promise的理解

Promise是处理异步操作的解决方案，当异步操作成功返回时，会用resolve把成功的信息递交给使用者，如果异步操作失败会用reject把错误原因递交给使用者。
平时的话处于pending状态，当结果来了会进入工作状态，要么从pending到fulfilled，要不pending到rejected，直到把结果交出去，就完成了它的工作。
在它的原型上面有两个方法，then和catch方法，当异步操作失败，reject递交错误原因的时候，就会走catch这个方法，catch携带的参数会被调用，获取错误的原因。then可以接收两个参数，当异步操作成功时，第一个参数会获取成功的信息，第二个参数是异步操作发生错误时，可以获取错误原因。
Promise业务能力是比较强的，他一次不仅仅只能处理一个异步操作，他可以同时处理多个异步操作，他有all和racel方法，all方法是只有在他接收所有Promise都接收成功才会返回成功，继续往下走。（要过一起过）racel方法不管成功还是失败，他都会立马往下走

五、Promise 的构造与使用

创建一个 Promise 对象需要传入一个执行器函数（executor function），该函数接受两个参数：resolve 和 reject。这两个参数都是函数，resolve 用于将 Promise 状态从 pending 变为 fulfilled，reject 用于将状态从 pending 变为 rejected。

const myPromise = new Promise((resolve, reject) => {
    // 异步操作
    let success = true;  // 假设一个操作是否成功的条件

    if (success) {
        resolve('操作成功');  // 将状态变为 fulfilled
    } else {
        reject('操作失败');  // 将状态变为 rejected
    }
});

六、使用 Promise 处理异步操作

Promise 的强大之处在于它可以通过 then 方法和 catch 方法链式调用，分别处理成功和失败的情况。

myPromise
    .then(result => {
        console.log(result);  // 输出: 操作成功
    })
    .catch(error => {
        console.error(error);  // 输出: 操作失败
    });

七、Promise 的链式调用

Promise 的另一个优点是可以链式调用多个异步操作，使得代码更加简洁和易读。

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('First promise resolved'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Second promise resolved'), 2000);
});

promise1
    .then(result1 => {
        console.log(result1);  // 输出: First promise resolved
        return promise2;       // 返回另一个 Promise
    })
    .then(result2 => {
        console.log(result2);  // 输出: Second promise resolved
    })
    .catch(error => {
        console.error(error);
    });

八、Promise.all 和 Promise.race

Promise.all: 接受一个包含多个 Promise 的数组，当所有 Promise 都成功时返回一个新的 Promise，其值是所有 Promise 结果的数组；如果有一个 Promise 失败，则返回失败的 Promise。

Promise.all([promise1, promise2])
    .then(results => {
        console.log(results);  
        // 输出: ['First promise resolved', 'Second promise resolved']
    })
    .catch(error => {
        console.error(error);
    });

Promise.race: 接受一个包含多个 Promise 的数组，当其中任何一个 Promise 完成时返回一个新的 Promise，其值是第一个完成的 Promise 的结果。

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result);  // 输出第一个完成的 Promise 的结果
    })
    .catch(error => {
        console.error(error);
    });

总结

Promise 提供了一种更加优雅和强大的方式来处理 JavaScript 中的异步操作。通过 then、catch 方法及链式调用，开发者可以编写更简洁、易读和易维护的异步代码。此外，Promise.all 和 Promise.race 等方法进一步增强了对复杂异步流程的控制能力。

Promise 是现代 JavaScript 开发中的重要工具，它不仅改善了代码质量，也为后续的 async/await 提供了基础。掌握 Promise 的使用对于任何希望深入了解 JavaScript 异步编程的开发者来说都是必不可少的。