网站一般怎么维护_怎样制作软件程序_可以发外链的网站整理_百度竞价排名怎么靠前

Promise 和 async/await 都是 JavaScript 处理异步操作的方法。
async/await 本质上是 Promise 的语法糖，可以使异步代码更具可读性。
下面是 Promise 的常见用法，并用 async/await 实现相同功能。

Promise.then功能

await后面的语句相当于.then后面的回调函数执行的语句

• Promise方式

function getData() {return new Promise((resolve) => {setTimeout(() => resolve("数据加载完成"), 1000);});
}getData().then((data) => console.log(data));

• async/await方式

async function fetchData() {const data = await getData();console.log(data);
}fetchData();

Promise.catch

async中try catch中catch中的语句相当于Promise.catch中回调函数的语句

• Promise方式：

function getData() {return new Promise((resolve, reject) => {setTimeout(() => reject("出错了"), 1000);});
}getData().catch((error) => console.error(error));

• async/await方式

async function fetchData() {try {const data = await getData();console.log(data);} catch (error) {console.error(error);}
}fetchData();

Promise.resolve

在async中可以通过return或Promise.resolve来主动实现Promise的resolve功能

1. 直接return

• async 函数 默认返回 Promise，所以 return “数据获取成功” 等价于 Promise.resolve(“数据获取成功”)。
• await getData() 拿到的是 resolve 后的值。

async function getData() {return "数据获取成功";
}async function fetchData() {try {const data = await getData();console.log(data); // 输出: 数据获取成功} catch (error) {console.error(error);}
}fetchData();

2. 如果没有显示return任何值

async function noReturn() {console.log("执行了 noReturn 函数");// 没有 return 任何值
}async function fetchData() {const result = await noReturn();console.log("返回值:", result); // 输出: 返回值: undefined
}fetchData();

• noReturn() 没有显式 return 任何值
• 但 所有 async 函数都会返回 Promise，即 默认返回 Promise。
• await noReturn() 相当于 await Promise.resolve(undefined)， 所以 result 是 undefined。

Promise.reject功能

async 函数，你可以通过 throw 关键字让其 主动触发 Promise 的 reject

1. throw触发reject

async function getData() {throw new Error("数据获取失败");
}async function fetchData() {try {const data = await getData();console.log(data);} catch (error) {console.error("捕获到错误:", error.message);}
}fetchData();

• getData 里 throw new Error(“数据获取失败”) 会导致 Promise 进入 reject 状态。
• fetchData 里 await getData() 遇到 reject，跳转到 catch 处理。

并行执行多个异步任务（Promise.all）

Promise方式

function task1() {return new Promise((resolve) => setTimeout(() => resolve("任务 1 完成"), 1000));
}
function task2() {return new Promise((resolve) => setTimeout(() => resolve("任务 2 完成"), 2000));
}Promise.all([task1(), task2()]).then((results) => {console.log(results);
});

async/await方式

async function runTasks() {const results = await Promise.all([task1(), task2()]);console.log(results);
}runTasks();

Promise.race

Promise方式

function fastTask() {return new Promise((resolve) => setTimeout(() => resolve("快任务完成"), 1000));
}
function slowTask() {return new Promise((resolve) => setTimeout(() => resolve("慢任务完成"), 2000));
}Promise.race([fastTask(), slowTask()]).then((result) => {console.log(result);
});

async/awiat方式

async function raceTasks() {const result = await Promise.race([fastTask(), slowTask()]);console.log(result);
}raceTasks();

逐个执行多个异步任务（reduce方式）

Promise方式

const tasks = [task1, task2];tasks.reduce((prev, task) => {return prev.then(() => task().then(console.log));
}, Promise.resolve());

async/await方式

async function runTasksSequentially() {for (const task of tasks) {console.log(await task());}
}runTasksSequentially();