promise的基本使用

二开菜鸟

已于 2023-05-05 16:22:32 修改

阅读量357

点赞数

文章标签： javascript 前端 vue.js

于 2023-05-05 16:18:18 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u010048119/article/details/130509311

版权

Promise是在异步编程中比较常用的一个工具，通过它我们可以更好地组织和管理异步任务。在本篇博客中，我将向大家介绍Promise的使用以及如何在实际项目中应用。

一、Promise的基本用法

Promise有三种状态，分别是：

pending：初始状态，既不是成功，也不是失败状态。
resolved：意味着操作成功完成。
rejected：意味着操作失败。
基本语法：

const promise = new Promise((resolve, reject) => {
    // 异步任务的代码逻辑，可以是网络请求，文件读取等
    if (异步操作成功) {
        resolve(数据);
    } else {
        reject(错误);
    }
});

promise.then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

在上面的代码中，我们创建了一个Promise实例并传入了一个executor函数（异步任务的代码逻辑），当异步任务执行成功后，调用resolve方法并将操作结果返回，如果异步任务执行失败，则调用reject方法并返回错误信息。最后我们通过then方法来处理异步操作成功后的逻辑，catch方法来处理异步操作失败后的逻辑。

二、Promise.all的使用

在实际项目中，我们可能需要同时发起多个异步请求，并在所有请求都完成后执行一些其他操作，这种情况下Promise.all就可以派上用场。

Promise.all的基本语法如下：

Promise.all([Promise1, Promise2, Promise3...]).then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

在上面的代码中，我们将多个Promise实例放入一个数组中作为Promise.all方法的参数，并在所有Promise实例都执行成功后，通过then方法获取每个Promise实例的返回结果，如果有一个Promise实例出现错误，则执行catch方法中的代码。

代码示例：

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据1');
    }, 2000);
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据2');
    }, 1000);
});

const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据3');
    }, 3000);
});

Promise.all([p1, p2, p3]).then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

在上例中，我们模拟了三个异步任务，并分别设置了不同的定时器，来模拟不同的耗时。在所有Promise实例都成功返回后，我们通过then方法来获取结果，如果其中有一个Promise实例出现错误，则会执行catch方法中的代码。

三、Promise.race的使用

除了Promise.all方法外，Promise还提供了Promise.race方法，他们都可以帮助我们从多个异步任务中获取结果，不同的是Promise.all会等到所有任务都完成后返回结果，而Promise.race则是在任何一个任务完成后即可返回结果。

Promise.race的基本语法如下：

Promise.race([Promise1, Promise2, Promise3...]).then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

与Promise.all方法类似，我们将多个Promise实例放入一个数组中作为Promise.race方法的参数，并在任何一个Promise实例完成后，通过then方法获取返回结果，如果有一个Promise实例出现错误，则执行catch方法中的代码。

代码示例：

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据1');
    }, 2000);
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据2');
    }, 1000);
});

const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据3');
    }, 3000);
});

Promise.race([p1, p2, p3]).then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});