网页策划书 网站建设定位小白学做网站教程

JavaScript中的 Promise 是用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 是异步编程的一种更简洁和更可读的方式，避免了回调地狱的问题。

1. Promise 的基本概念
   一个 Promise 是一个表示异步操作最终完成（或失败）并返回结果的对象。Promise 具有三种状态：

Pending（待定）：初始状态，表示异步操作尚未完成。
Resolved/Fulfilled（已完成）：操作成功完成，返回值。
Rejected（已拒绝）：操作失败，返回错误信息。
2. Promise 构造函数

let promise = new Promise((resolve, reject) => {// 异步操作if (成功) {resolve(结果); // 操作成功，返回结果} else {reject(错误信息); // 操作失败，返回错误信息}
});

resolve(value)：改变 Promise 状态为 fulfilled，并传递一个值。
reject(error)：改变 Promise 状态为 rejected，并传递一个错误。
3. Promise 的状态转换
初始状态：pending
状态1：resolved，调用 resolve()。
状态2：rejected，调用 reject()。
4. Promise 的链式调用
Promise 支持链式调用，可以通过 .then()、.catch() 和 .finally() 来处理异步操作的结果。

4.1 then()
then() 用于定义成功和失败的回调函数。

promise.then((result) => {console.log('成功：', result);}).catch((error) => {console.error('失败：', error);});

then() 接受两个回调函数：
第一个回调函数用于处理成功的结果。
第二个回调函数用于处理失败的结果（可选）。
4.2 catch()
catch() 用于捕获并处理异常。通常与 then() 一起使用。

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

4.3 finally()
finally() 用于在 Promise 完成（无论是成功还是失败）后执行清理操作。

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

5. Promise 的常见静态方法
   5.1 Promise.resolve()
   Promise.resolve() 返回一个已经解决的 Promise，其值是传入的参数。

let promise = Promise.resolve(42);
promise.then(value => {console.log(value); // 输出 42
});

5.3 Promise.all()
Promise.all() 接收一个 Promise 数组，返回一个新的 Promise，当所有的 Promise 都成功时，该 Promise 会成功，返回一个数组。只要有一个 Promise 失败，整个 Promise.all() 就会失败。

Promise.all([promise1, promise2, promise3]).then(results => {console.log(results); // 所有 promise 成功时的结果数组}).catch(error => {console.error(error); // 如果有一个失败，捕获错误});

5.4 Promise.allSettled()
Promise.allSettled() 接收一个 Promise 数组，返回一个新的 Promise，无论所有的 Promise 是成功还是失败，都会在所有 Promise 结束后返回。

Promise.allSettled([promise1, promise2]).then(results => {console.log(results); // 输出每个 promise 的状态（fulfilled/rejected）});

5.5 Promise.race()
Promise.race() 返回一个新的 Promise，它会在第一个 Promise 完成（无论是成功还是失败）时返回。

Promise.race([promise1, promise2]).then(result => {console.log(result); // 第一个完成的 promise 的结果}).catch(error => {console.error(error); // 第一个失败的 promise 错误});

5.6 Promise.any()
Promise.any() 返回一个新的 Promise，它会在第一个成功的 Promise 返回时成功。如果所有的 Promise 都失败，返回一个 AggregateError。

Promise.any([promise1, promise2]).then(result => {console.log(result); // 第一个成功的 promise 的结果}).catch(error => {console.error(error); // 如果所有 promise 都失败，捕获错误});

6. Promise 的手动实现
   实现一个基本的 Promise 类：
   class MyPromise {
   constructor(executor) {
   this.state = ‘pending’; // 初始状态
   this.value = undefined; // 成功时的值
   this.reason = undefined; // 失败时的原因

   this.onFulfilled = []; // 存储成功的回调
   this.onRejected = []; // 存储失败的回调

   const resolve = (value) => {
   if (this.state === ‘pending’) {
   this.state = ‘fulfilled’;
   this.value = value;
   this.onFulfilled.forEach(fn => fn(value));
   }
   };

   const reject = (reason) => {
   if (this.state === ‘pending’) {
   this.state = ‘rejected’;
   this.reason = reason;
   this.onRejected.forEach(fn => fn(reason));
   }
   };

   executor(resolve, reject);
   }

then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === ‘fulfilled’) {
const result = onFulfilled(this.value);
resolve(result);
} else if (this.state === ‘rejected’) {
const result = onRejected(this.reason);
reject(result);
} else {
this.onFulfilled.push(() => {
const result = onFulfilled(this.value);
resolve(result);
});
this.onRejected.push(() => {
const result = onRejected(this.reason);
reject(result);
});
}
});
}
}