JS Promise的用法|极客笔记

JS Promise的用法

在JavaScript开发中，处理异步操作是一项十分常见的任务。在过去，我们通常使用回调函数来处理异步操作，但随着项目变得越来越复杂，回调地狱问题也逐渐凸显出来。为了解决这一问题，ES6引入了Promise对象，来更优雅地处理异步操作。

Promise是什么？

Promise是一种用来处理异步操作的对象，它代表了一个异步操作的最终完成或失败，并返回相应的结果。一个Promise对象有以下三种状态：

Pending（进行中）：初始化状态，既不成功，也不失败。
Fulfilled（已成功）：表示操作成功完成。
Rejected（已失败）：表示操作失败。

一旦Promise的状态发生改变，就不会再变化。Promise对象有以下两个重要的方法：

“`then()“`：用于指定Promise对象的成功和失败状态的回调函数。
“`catch()“`：用于指定Promise对象的失败状态的回调函数。

创建Promise对象

我们可以使用
“`new Promise()“`来创建一个Promise对象。Promise构造函数接收一个操作函数，该函数有两个参数：“`resolve“`和“`reject“`，分别用于将Promise对象从Pending状态改变为Fulfilled和Rejected状态。

下面是一个简单的示例代码：

let myPromise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        let randomNumber = Math.random();
        if (randomNumber > 0.5) {
            resolve(randomNumber);
        } else {
            reject("生成的随机数小于0.5");
        }
    }, 2000);
});

myPromise.then((result) => {
    console.log("操作成功，随机数为：" + result);
}).catch((error) => {
    console.log("操作失败：" + error);
});

在这段代码中，我们创建了一个Promise对象
“`myPromise“`，并在2秒后生成一个随机数，如果随机数大于0.5，则调用“`resolve()“`方法，表示操作成功；如果随机数小于等于0.5，则调用“`reject()“`方法，表示操作失败。

Promise链式调用

在处理异步操作时，我们经常需要多个Promise对象进行串联。Promise提供了
“`then()“`方法，让我们可以方便地进行链式调用。

示例代码如下：

function asyncTask1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Task 1完成");
        }, 1000);
    });
}

function asyncTask2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Task 2完成");
        }, 2000);
    });
}

asyncTask1()
    .then((result) => {
        console.log(result);
        return asyncTask2();
    })
    .then((result) => {
        console.log(result);
    });

在这段代码中，我们定义了两个异步任务
“`asyncTask1“`和“`asyncTask2“`，它们返回Promise对象。我们首先执行“`asyncTask1“`，在其完成后再执行“`asyncTask2“`。

Promise.all和Promise.race

除了串联调用Promise对象外，有时候我们需要同时执行多个Promise对象，此时可以使用
“`Promise.all()“`方法。“`Promise.all()“`接收一个包含多个Promise对象的数组，当所有Promise对象都成功时，返回一个包含所有结果的数组；当有一个Promise对象失败时，则返回失败的结果。

示例代码如下：

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Task 1完成");
    }, 2000);
});

let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Task 2完成");
    }, 1000);
});

Promise.all([promise1, promise2])
    .then((results) => {
        console.log(results);
    })
    .catch((error) => {
        console.log(error);
    });

在这段代码中，我们定义了两个Promise对象
“`promise1“`和“`promise2“`，通过“`Promise.all()“`同时执行它们，并在所有Promise对象都成功时输出。

另外，如果我们希望多个Promise对象中谁先执行完谁先返回结果，可以使用
“`Promise.race()“`方法。“`Promise.race()“`接收一个包含多个Promise对象的数组，当其中任意一个Promise对象改变状态时，就返回该Promise对象的结果。

异步操作中的错误处理

在异步操作中，也经常会出现错误。Promise提供了
“`catch()“`方法，用来处理异步操作中的错误。

let myPromise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        let randomNumber = Math.random();
        if (randomNumber > 0.5) {
            resolve(randomNumber);
        } else {
            reject("生成的随机数小于0.5");
        }
    }, 2000);
});

myPromise.then((result) => {
    console.log("操作成功，随机数为：" + result);
}).catch((error) => {
    console.log("操作失败：" + error);
});

在这段代码中，如果异步操作失败，则会进入
“`catch()“`方法，输出相应的错误信息。