在 JavaScript 中，异步编程是一个不可避免的话题。为了处理异步操作，JavaScript 提供了两种机制：Promise 和 async/await。它们的本质区别在于，Promise 是一种解决异步编程的模式，而async/await 是基于 Promise 的语法糖。
Promise
Promise 是一种解决 JavaScript 异步编程的模式，也是 ES6 中新增加的语法。Promise 代表一个异步操作的最终完成或失败，并返回一个值或错误。
Promise 有三种状态：
- Pending（处理中）：初始状态，既不成功，也不失败；
- Fulfilled（已成功）：意味着操作成功完成，返回一个值；
- Rejected（已失败）：意味着操作失败，返回一个错误。
Promise 的语法如下：
const promise = new Promise((resolve, reject) => {
// 异步操作
if (异步操作成功) {
resolve(返回结果);
} else {
reject(返回错误);
}
});Promise 的使用示例：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
}, 1000);
});
promise.then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});上述代码会在一秒后输出 Hello World。
async/await
async/await 是 ES7 标准中的异步编程新特性。它是基于 Promise 的语法糖。async/await 让异步代码看起来像同步代码，提高了代码的可读性和可维护性。
async 表示函数是异步的，一定会返回一个 Promise 对象。
await 关键字只能在 async 函数体中使用，它会等待一个异步操作的结果。
async/await 的语法如下：
async function asyncFunction() {
try {
const response = await 异步操作;
console.log(response);
} catch (error) {
console.error(error);
}
}async/await 的使用示例：
async function asyncFunction() {
try {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
}, 1000);
});
const res = await promise;
console.log(res);
} catch (error) {
console.error(error);
}
}
asyncFunction();上述代码会在一秒后输出 Hello World。
区别
async/await 和 Promise 之间的区别如下：
- 语法：async/await 提供更加简洁易懂的语法，可以写出和同步代码相似的异步代码；而 Promise 更加灵活，可以从任何地方进行 then 链式调用。
- 错误处理：使用 async/await 时，可以使用 try-catch 进行错误处理；而 Promise 必须使用 then 和 catch 进行错误处理。
- 可读性：async/await 更加易读易懂，代码看上去更加简洁，不用链式嵌套。同时，async 和 await 关键字具有语义性，可以清楚地表达代码的意图。
总结
async/await 和 Promise 都是解决 JavaScript 异步编程的方案。async/await 是基于 Promise 的语法糖，可以更加方便地编写清晰的代码，提供了同步代码风格的编程体验。我们应该根据实际情况来选择使用 Promise 还是 async/await。
希望这篇文章可以帮助你和前端异步编程有关的问题，在学习异步编程时记住异步编程的本质，并利用 Promise 和 async/await 来提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e567dadd4f0e0ff753a87