Promise用法详解

一、Promise的基础用法

Promise是ES6中新增的异步编程解决方案，是一种封装回调函数的解决方案。Promise有三个状态：pending（等待中）、fulfilled（已成功）、rejected（已失败）。Promise通过执行异步操作后返回一个promise实例，提供then()、catch()方法用来处理操作成功和失败后对应的回调函数。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise Resolved"); //操作成功
    }, 2000);
});

promise.then((result) => {
    console.log(result); //打印出"Promise Resolved"
})

以上代码中定义了一个promise对象，通过setTimeout模拟异步操作。当异步操作成功后resolve()方法被调用，将会触发promise的then()方法调用并输出“Promise Resolved”。

二、Promise的链式调用

Promise也支持链式调用，这样不仅方便传递数据，还能保证操作的顺序性和可读性。

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("First Promise Resolved");
    }, 2000);
});

const secondPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Second Promise Resolved");
    }, 3000);
});

firstPromise.then((result) => {
    console.log(result); //输出"First Promise Resolved"
    return secondPromise; //返回第二个promise对象
})
.then((result) => {
    console.log(result); //输出"Second Promise Resolved"
})

以上代码中，firstPromise和secondPromise分别模拟两个异步操作，firstPromise的返回结果往下传递到了第二个then()方法中。这样我们可以轻松地通过链式调用来操作多个异步操作。

三、Promise的错误处理

在异步操作中可能会出现错误，我们可以通过Promise的catch()方法来处理错误。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Promise Rejected"); //操作失败
    }, 2000);
});

promise.then((result) => {
    console.log(result);
})
.catch((error) => {
    console.log(error); //打印出"Promise Rejected"
})

以上代码中，模拟异步操作失败，会首先调用reject()方法。catch()方法会捕捉到错误信息并输出。

四、Promise.all()用法

Promise.all()方法可以接收一个可迭代的对象（如：数组），并执行多个promise对象。当所有promise都执行成功后返回一个结果数组，其中包含所有promise的返回值。

const firstPromise = Promise.resolve(1);
const secondPromise = Promise.resolve(2);
const thirdPromise = Promise.resolve(3);

Promise.all([firstPromise, secondPromise, thirdPromise])
.then((results) => {
    console.log(results); //输出[1, 2, 3]
})

以上代码中，Promise.all()方法接收一个包含3个promise的数组，这些异步操作同时启动，紧接着我们通过then()方法获取返回值。

五、Promise.race()用法

Promise.race()方法和Promise.all()方法不同，Promise.race()的返回值是第一个完成的Promise的返回值。

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("First Promise Resolved");
    }, 2000);
});

const secondPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Second Promise Resolved");
    }, 3000);
});

Promise.race([firstPromise, secondPromise])
.then((result) => {
    console.log(result); //输出"First Promise Resolved"
})

以上代码中，我们同时启动两个异步操作。Promise.race()方法输出的结果是其中第一个完成的promise操作。

六、Promise.resolve()和Promise.reject()方法

Promise.resolve()和Promise.reject()方法是一种快速创建Promise对象的方式。

//Promise.resolve()方法
Promise.resolve("Promise Resolved")
.then((result) => {
    console.log(result); //输出"Promise Resolved"
})

//Promise.reject()方法
Promise.reject("Promise Rejected")
.catch((error) => {
    console.log(error); //输出"Promise Rejected"
})

Promise.resolve()方法会立即执行并返回一个处理成功的promise对象，Promise.reject()方法则立即返回一个处理失败的promise对象。

七、Promise和async/await的使用

async/await是ES7的新特性，它提供了一种更加简单、易于读取的方式来编写异步代码。

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2000);
    });
}

async function asyncCall() {
    console.log('calling');
    const result = await resolveAfter2Seconds();
    console.log(result); // 输出"resolved" 
}

asyncCall();

以上代码中，resolveAfter2Seconds()方法模拟一个异步操作，asyncCall()函数中使用了async关键字来定义异步函数。使用await关键字，让异步操作的执行等待异步操作的完成，然后将返回值存储在result变量中。

八、总结

Promise可以帮助我们更加简单、方便、直观地管理异步代码，通过使用Promise能够让我们的代码变得更加清晰、易于维护和理解。