前端小白也能看懂的 Promise 原理与使用教程（附 async/await 升级指南）前端promise怎么使用
本文介绍了前端开发中Promise的原理与使用教程，包括Promise的基本概念、创建方式、链式调用、错误处理以及Promise.all和Promise.race的用法，文章还提供了async/await的升级指南，帮助开发者更简洁地处理异步操作，对于前端小白来说，文章用通俗易懂的语言解释了Promise的工作原理，并附上了详细的代码示例，让读者能够轻松上手，无论是初学者还是有一定经验的开发者，都能从本文中获得有用的信息和技巧。
前端小白也能看懂的 Promise 原理与使用教程（附 async/await 升级指南）
在前端开发的旅程中，异步编程是一个绕不开的话题，而Promise作为处理异步操作的核心工具之一，其重要性不言而喻，本文将深入浅出地讲解Promise的原理、使用方法，并附上async/await的升级指南,帮助前端小白们轻松掌握这一关键技能。
Promise 是什么？
Promise是JavaScript中用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise可以让我们以更优雅的方式处理那些需要等待的操作，比如网络请求、文件读取等。
Promise 的基本用法
创建 Promise
要创建一个Promise，需要使用new Promise(executor)构造函数，其中executor是一个立即执行的函数，它接收两个参数：resolve和reject。
let promise = new Promise((resolve, reject) => {
// 异步操作
if (/* 操作成功 */) {
resolve(value); // 成功时调用 resolve，并将结果作为参数传递
} else {
reject(error); // 失败时调用 reject，并将错误作为参数传递
}
});
使用 Promise
创建完Promise后，可以通过.then()方法添加成功时的回调函数，通过.catch()方法添加失败时的回调函数。
promise.then((value) => {
// 成功时的处理逻辑
}).catch((error) => {
// 失败时的处理逻辑
});
Promise 链式调用
由于.then()和.catch()返回的是新的Promise对象，我们可以进行链式调用,以实现更复杂的异步流程控制。
let p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'one');
});
let p2 = p1.then((value) => {
return new Promise((resolve, reject) => {
setTimeout(resolve, 100, value + ' two');
});
});
p2.then((value) => {
console.log(value); // 输出 'one two'
});
Promise 原理剖析
在底层，Promise的实现依赖于事件循环和回调函数队列，当executor中的代码执行时，它会将回调函数（即.then()中的函数）放入相应的队列中等待执行，当异步操作完成（即调用resolve或reject），相应的回调函数会从队列中取出并执行，这就是所谓的“微任务”（microtask）,它们会在当前执行栈清空后立即执行。
async/await 升级指南
虽然Promise已经足够强大，但在处理复杂的异步流程时，代码可能会变得冗长且难以阅读，这时，async/await应运而生，它提供了一种更简洁、更直观的语法来处理异步操作。
使用 async/await 的基本步骤：
- 将函数声明为
async，这会使得该函数隐式返回一个Promise对象。 - 使用
await关键字来等待某个异步操作的结果，注意：await只能在async函数中使用。
async function fetchData() {
let response = await fetch('https://api.example.com/data'); // 等待 fetch 完成并获取结果
let data = await response.json(); // 解析 JSON 数据并等待完成
return data; // 返回数据或进行其他操作
}
错误处理与 try/catch 结合：
与Promise的.catch()方法类似，async/await可以结合try/catch进行错误处理,这使得代码更加简洁且易于维护。
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data'); // 等待 fetch 完成并获取结果，如果失败会抛出错误
let data = await response.json(); // 解析 JSON 数据并等待完成，如果失败会抛出错误（例如解析错误）
return data; // 返回数据或进行其他操作（如果出错则不会执行到这里）
} catch (error) {
console.error('Error:', error); // 捕获并处理错误（例如网络错误或解析错误）
}
}