ES6 Promise 对象-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

ES6 Promise是JavaScript中一种用于处理异步操作的机制。在早期的JavaScript版本中，为了实现异步操作，通常会使用回调函数，这种方式容易造成回调函数的嵌套，使代码难以维护和阅读。而ES6 Promise的出现，使得异步操作的处理变得更加简单和清晰。

-----------------------------

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当创建一个Promise对象时，它处于pending状态。Promise对象可以被resolve（解决）或reject（拒绝）,这会使Promise对象状态变为fulfilled或rejected。

下面是一个简单的Promise示例：

```
let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise resolved");
    }, 2000);
});

myPromise.then(function(value) {
    console.log(value);
});
```

在这个例子中，我们创建了一个Promise对象，并在2秒后将其resolve。使用then()方法，我们将在Promise成功解决后打印出解决值。

Promise还提供了.catch()方法，用于处理Promise被拒绝的情况。如果Promise对象在处理期间出现了错误，它会被拒绝，并且错误将被传递给catch()方法。下面是一个简单的例子：

```
let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject("Promise rejected");
    }, 2000);
});

myPromise.catch(function(error) {
    console.log(error);
});
```

在这个例子中，我们创建了一个Promise对象，并在2秒后将其reject。使用catch()方法，我们将在Promise被拒绝时打印出拒绝原因。

Promise还可以被链式调用。在Promise对象被解决后，它会返回一个新的Promise对象，可以使用then()方法进行链式调用。这种链式调用可以在代码中创建非常清晰的处理流程。下面是一个简单的例子：

```
let myPromise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);
    }, 2000);
});

myPromise.then(function(value) {
    console.log(value); // 1
    return value + 1;
}).then(function(value) {
    console.log(value); // 2
    return value + 1;
}).then(function(value) {
    console.log(value); // 3
});
```

在这个例子中，我们创建了一个Promise对象，它返回1。然后我们使用then()方法进行链式调用，并在每个then()方法中将返回值加1。这将创建一个清晰的处理流程，以便在Promise成功解决后顺序执行。

ES6 Promise还提供了Promise.all()和Promise.race()方法。Promise.all()方法接受一个Promise数组作为参数，并在所有Promise对象都被解决后解决它自己的Promise对象。Promise.race()方法接受一个Promise数组作为参数，并在其中任何一个Promise对象被解决后解决它自己的Promise对象。下面是一个简单的例子：

```
let promise1 = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise 1 resolved");
    }, 3000);
});

let promise2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise 2 resolved");
    }, 2000);
});

Promise.all([promise1, promise2]).then(function(values) {
    console.log(values); // ["Promise 1 resolved", "Promise 2 resolved"]
});

Promise.race([promise1, promise2]).then(function(value) {
    console.log(value); // "Promise 2 resolved"
});
```

在这个例子中，我们创建了两个Promise对象，它们分别在2秒和3秒后被解决。然后我们使用Promise.all()方法将它们作为一个数组传递，以便在所有Promise对象都被解决后打印出所有解决值。使用Promise.race()方法，我们可以在其中任何一个Promise对象被解决后打印出解决值。

**小结**
ES6 Promise在JavaScript中处理异步操作提供了更好的解决方案。它使得异步操作变得更加清晰和易于维护。在实际应用中，可以使用Promise对象轻松地处理异步操作，并创建一个清晰的处理流程。同时，Promise.all()和Promise.race()方法也使得并行处理多个异步操作变得更加容易和高效。

该分类下的相关小册推荐：

npm script实战构建前端工作流

编程入门课：Javascript从入门到实战

剑指javascript

Javascript重点难点实例精讲（一）

WebSocket入门与案例实战

Flutter核心技术与实战

零基础学JavaScript

web前端开发性能优化实战

深入学习前端重构知识体系

JavaScript面试指南

Node.js 开发实战

剑指javascript-ES6