一、Promise基础
Promise的定义与特性
Promise就是一个代表异步操作最终完成（或失败）及其结果值的对象。它像是一个容器，保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise有三种状态：
-
Pending（待定）：这是Promise的初始状态，表示异步操作尚未完成，既没有被兑现也没有被拒绝。
-
Fulfilled（已兑现）：当异步操作成功完成时，Promise的状态会变为fulfilled。这意味着操作已经成功，我们可以从Promise中获取到预期的结果。
-
Rejected（已拒绝）：如果异过操作失败或出现错误，Promise的状态会变为rejected。此时，我们可以通过Promise获取到错误信息。
Promise的状态一旦从pending变为fulfilled或rejected，就不可再改变。这种“一旦确定就不可更改”的特性被称为“不变性”，它确保了异步操作的最终结果（无论是成功还是失败）都能被可靠地处理。
二、Promise的基本用法
在使用Promise处理异步操作时，我们首先需要了解如何创建Promise对象。Promise对象通常通过new Promise构造函数来创建，该构造函数接受一个执行器函数（executor）作为参数。这个执行器函数本身又接受两个参数：resolve和reject，分别表示异步操作成功和失败时的处理函数。
const promise = new Promise((resolve, reject) => {
// 异步操作代码
if (/* 异步操作成功 */) {
resolve(value); // 调用resolve并传入结果值
} else {
reject(error); // 调用reject并传入错误信息
}
});
创建Promise对象后，我们可以通过.then()和.catch()方法链来处理异步操作的结果。
promise.then((result) => {
// 处理异步操作成功的结果 result是上面Resolve传出的值
}).catch((error) => {
// 处理异步操作失败的结果
});
具体例子
function getBaiduHtml() {
return new Promise((resolve, reject) => {
fetch('http://www.baidu.com').then((res) => {
resolve(res.text());
}).catch((err) => {
reject(err);
});
});
}
getBaiduHtml().then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
三、Promise的高级用法
链式调用
Promise允许链式调用，即一个Promise的then方法可以返回另一个Promise,上一个Promise返回的值作为参数传递到下一个Promise当中，从而形成链式结构。这种链式调用使得异步操作的流程更加清晰，也便于错误处理。
FirstPromise()
.then(processData)
.then(saveData)
.then(() => console.log('操作完成'))
.catch(err => console.error('操作失败', err));
处理多个Promise
当需要同时处理多个Promise时，可以使用Promise.all方法。它接受一个Promise数组作为参数，并返回一个新的Promise，当所有Promise都成功时，返回的Promise才会成功，并且结果是一个包含所有Promise结果的数组。Promise.all通常用于处理多个并行异步操作，如同时发起多个网络请求。
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log('所有操作成功', values);
})
.catch(error => {
console.log('至少有一个操作失败', error);
});
与Promise.all不同，Promise.race方法返回的是第一个完成的Promise（不论成功或失败）。这通常用于处理多个异步操作中速度最快的那个。
Promise.race([promise1, promise2])
.then(value => {
console.log('第一个完成的操作', value);
})
.catch(error => {
console.log('第一个完成的操作失败', error);
});
Promise的错误处理
Promise的错误处理机制主要依赖于.then和.catch方法。在链式调用中，如果某个Promise失败，后续的then方法会自动跳过，直到遇到一个.catch方法。这种机制使得错误处理更加集中和直观。
fetchData()
.then(processData)
.then(saveData)
.catch(err => console.error('操作失败', err));
Promise与async/await
尽管Promise提供了强大的异步操作控制，但在处理复杂的逻辑和流程控制时，代码仍然可能变得难以维护。为了解决这个问题，ES2017引入了async/await语法。
async/await是基于Promise的语法糖，它使得异步代码看起来更加同步。一个async函数总是返回一个Promise，可以使用await关键字在async函数内部等待一个Promise。
async function asyncFunction() {
try {
const result = await fetchData();
const processedResult = await processData(result);
await saveData(processedResponse);
console.log('操作成功');
} catch (err) {
console.log('操作失败', err);
}
}
async/await使得异步代码更加简洁，更容易理解和调试。它特别适用于那些需要按顺序执行多个异步操作的场景。
四、Promise与async/await的对比
Promise和async/await都是处理异步操作的方式，但它们在代码风格和错误处理上有所不同。
代码风格
Promise的链式调用使得异步操作的流程更加直观，但当链过长时，代码可能变得难以阅读和维护。async/await使得异步代码看起来更加同步，更适合处理复杂的逻辑和流程控制。
Promise：
fetchData()
.then(processData)
.then(saveData)
.then(() => console.log('操作成功'))
.catch(err => console.error('操作失败', err));
async/await：
async function asyncFunction() {
try {
const result = await fetchData();
const processedResult = await processData(result);
await saveData(processedResult);
console.log('操作成功');
} catch (err) + {
console.error('操作失败', err);
}
}
错误处理
Promise的错误处理依赖于.catch方法，需要在每个链式调用后处理错误。async/await的错误处理使用try/catch，更符合传统的同步代码风格。
性能
在性能上，Promise和async/await的性能差异不大，但在某些情况下，async/await可能会稍微慢一些，因为它涉及到更多的上下文切换。
