2.1 创建 Promis
Promis 是一个对象，代表一个异步操作的完成（或失败）及其结果。 它们是在 ES6 (ECMAScript 2015) 中引入的，并成为在 JavaScript 中处理异步代码的标准方式。
基本概念
Promis 可以处于以下三种状态之一：
- Pending (等待中): 初始状态，未完成也未拒绝。
- Fulfilled (已完成): 操作成功完成。
- Rejected (已拒绝): 操作以错误结束。
创建 Promis
Promis 是使用 Promise 构造函数创建的，该构造函数接受一个执行函数 (executor function)。此函数接受两个参数：resolve 和 reject。 在此函数内部执行异步代码，成功时调用 resolve，出错时调用 reject。
语法:
const promise = new Promise((resolve, reject) => {
// 异步操作
if (/* 成功完成 */) {
resolve(value); // 成功
} else {
reject(error); // 错误
}
});
创建 Promis 的示例:
JavaScript
const myPromise = new Promise((resolve, reject) => {
const success = true; // 成功执行的条件
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 使用 Promis
then 方法
then 方法用于处理 promis 的成功执行。它接受两个函数：第一个用于处理 成功执行，第二个用于处理错误。不过通常用于处理错误的是 catch 方法。
使用 then 的示例:
JavaScript
myPromise.then(
(successMessage) => {
console.log(successMessage); // 输出: Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // 在出错时调用
}
);
catch 方法
catch 方法用于处理 promis 的错误。它接受一个函数，在 promis 被拒绝时调用。
使用 catch 的示例:
JavaScript
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // 调用: Operation failed
});
finally 方法
finally 方法用于执行无论 promis 结果如何（成功或失败）都要执行的代码。 它不接受参数，无论 promis 执行还是被拒绝，都会执行。
使用 finally 的示例:
JavaScript
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // 无论如何都会调用
});
2.3 使用 Promis 的示例
示例 1: 使用 Promis 的异步操作
使用定时器模拟异步操作。
JavaScript
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
示例 2: 顺序执行 Promis
模拟顺序异步操作。
JavaScript
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
示例 3: 使用 Promise.all 执行并行 Promis
模拟并行异步操作。
JavaScript
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // 输出: ['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION