酷家乐设计家官网廊坊视频优化展现

 `Promise` 的状态和方法

 1. `Promise` 的状态

一个 `Promise` 可以处于以下三种状态之一：

- Pending（待定）：初始状态，表示异步操作正在进行中，`Promise` 还没有被解决或拒绝。
- Fulfilled（已完成）：操作成功完成，`Promise` 已经 resolved（解决），并返回结果。
- Rejected（已拒绝）：操作失败，`Promise` 已经 rejected（拒绝），并返回错误原因。

这三个状态是 `Promise` 在生命周期中会经历的状态，一旦状态从 Pending 变为 Fulfilled 或 Rejected，它就不能再改变状态。

 2. `Promise` 的方法

`Promise` 提供了一些常用的方法来处理异步操作的结果。这些方法用于设置 `Promise` 完成时的行为或处理错误。

1. `then(onFulfilled, onRejected)`

- `then()` 方法用于指定当 `Promise` 成功时（状态变为 `Fulfilled`）执行的回调函数，以及当 `Promise` 失败时（状态变为 `Rejected`）执行的回调函数。
- `onFulfilled` 是操作成功时的回调，`onRejected` 是操作失败时的回调。

javascript
promise.then(result => {console.log('操作成功:', result);},error => {console.log('操作失败:', error);}
);

 

链式调用：
- `then()` 返回一个新的 `Promise` 对象，因此可以进行链式调用。链式调用的返回值会传递到下一个 `then()` 中。

javascript
promise.then(result => {return result + ' 继续执行';}).then(newResult => {console.log(newResult);  // '继续执行'}).catch(error => {console.log(error);});

 

 2. `catch(onRejected)`

- `catch()` 方法是专门用来处理 `Promise` 被拒绝（即状态为 `Rejected`）时的回调。它实际上是 `.then(null, onRejected)` 的简写。

javascript
promise.then(result => {console.log(result);}).catch(error => {console.error('操作失败:', error);});

 

 3. `finally(onFinally)`

- `finally()` 方法用于在 `Promise` 执行完毕后，无论成功还是失败，都会执行 `onFinally` 回调函数。`finally` 返回的 `Promise` 对象会继承原 `Promise` 的状态。

javascript
promise.then(result => {console.log('成功:', result);}).catch(error => {console.log('失败:', error);}).finally(() => {console.log('无论成功或失败都会执行');});

 

 4. `Promise.resolve(value)`

- `Promise.resolve(value)` 方法返回一个已经 `fulfilled` 状态的 `Promise`，并且返回 `value` 作为结果。
- 如果传入的是一个 `Promise` 对象，则返回该 `Promise` 对象。

javascript
let resolvedPromise = Promise.resolve('成功');
resolvedPromise.then(result => {console.log(result);  // '成功'
});

 

5. `Promise.reject(reason)`

- `Promise.reject(reason)` 方法返回一个已经 `rejected` 状态的 `Promise`，并且返回 `reason` 作为拒绝的原因。

javascript
let rejectedPromise = Promise.reject('失败');
rejectedPromise.catch(error => {console.log(error);  // '失败'
});

6. `Promise.all(iterable)`

- `Promise.all()` 方法接收一个可迭代对象（例如数组），并返回一个新的 `Promise`。该 `Promise` 会等到所有的 `Promise` 都完成时才会被 `fulfilled`，或者当其中一个 `Promise` 被 `rejected` 时就被 `rejected`。
- 该方法适用于需要并行执行多个异步操作，并等待它们全部完成的场景。

javascript
let promise1 = Promise.resolve(1);
let promise2 = Promise.resolve(2);
let promise3 = Promise.resolve(3);Promise.all([promise1, promise2, promise3]).then(results => {console.log(results);  // [1, 2, 3]}).catch(error => {console.error(error);});

 

 7. `Promise.race(iterable)`

- `Promise.race()` 方法接收一个可迭代对象（例如数组），并返回一个新的 `Promise`。该 `Promise` 在第一个 `Promise` 完成（无论是 `fulfilled` 还是 `rejected`）时就会结束，不再等待其他 `Promise` 完成。

javascript
let promise1 = new Promise(resolve => setTimeout(resolve, 100, 'A'));
let promise2 = new Promise(resolve => setTimeout(resolve, 200, 'B'));Promise.race([promise1, promise2]).then(result => {console.log(result);  // 'A' (第一个完成的 Promise)});

 

 3. 总结

- `then()`：用于处理成功和失败的回调，支持链式调用。
- `catch()`：用于处理 `Promise` 被拒绝时的回调，简化错误处理。
- `finally()`：无论成功或失败都执行的回调，用于执行清理操作。
- `Promise.resolve()`：用于返回一个已解决的 `Promise`。
- `Promise.reject()`：用于返回一个已拒绝的 `Promise`。
- `Promise.all()`：用于并行执行多个异步操作，所有操作完成后才会返回。
- `Promise.race()`：用于返回第一个完成的异步操作。

这些方法帮助我们更优雅地处理异步操作，避免回调地狱，并简化错误处理。