1. 简介
Promise 和 async/await 都是 JavaScript 中用于处理异步编程的工具。Promise 是 ES6 中新增的语法，是一种处理异步操作的方式。而 async/await 是在 ES7 中引入的语法，它是建立在 Promise 之上的一种更加简洁优雅的异步编程方式。
2. Promise
Promise 是一种处理异步操作的方式，它可以将异步操作转换为同步操作的形式。Promise 有三种状态：pending（等待）、fulfilled（成功）和 rejected（失败）。Promise 对象有一个 then 方法，可以在异步操作完成后进行调用，then 方法接收两个参数：onFulfilled 和 onRejected。当异步操作成功时，调用 onFulfilled 方法，当异步操作失败时，调用 onRejected 方法。
Promise 的优点在于它可以避免回调地狱，将异步操作转换为同步操作的形式，使代码更加清晰易读。同时，Promise 也支持链式调用，可以在 then 方法中返回一个新的 Promise 对象，实现链式调用。
下面是一个 Promise 的示例代码：
// javascriptcn.com 代码示例
function getData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
getData('https://jsonplaceholder.typicode.com/posts/1')
.then(data => console.log(data))
.catch(error => console.error(error));3. async/await
async/await 是建立在 Promise 之上的一种更加简洁优雅的异步编程方式。async/await 是一种语法糖，它可以让异步代码看起来像同步代码，使代码更加易读易写。
async/await 的关键字是 async 和 await。async 用于声明一个异步函数，而 await 用于等待一个异步操作完成。
下面是一个 async/await 的示例代码：
// javascriptcn.com 代码示例
async function getData(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
getData('https://jsonplaceholder.typicode.com/posts/1')
.then(data => console.log(data))
.catch(error => console.error(error));4. Promise 与 async/await 的区别
Promise 和 async/await 都是用于处理异步编程的工具，它们之间的区别在于：
语法：Promise 是通过 then 方法来处理异步操作的结果，而 async/await 是通过 async 和 await 关键字来处理异步操作的结果。
错误处理：Promise 使用 catch 方法来处理异步操作的错误，而 async/await 使用 try/catch 语句来处理异步操作的错误。
可读性：async/await 可以让异步代码看起来像同步代码，使代码更加易读易写。
5. 使用场景
Promise 和 async/await 都是用于处理异步编程的工具，它们的使用场景如下：
Promise 适用于需要处理多个异步操作的情况，可以使用 Promise.all 方法来等待多个异步操作完成。
async/await 适用于需要处理单个异步操作的情况，可以让异步代码看起来像同步代码，使代码更加易读易写。
6. 总结
Promise 和 async/await 都是用于处理异步编程的工具，它们之间的区别在于语法、错误处理和可读性。Promise 适用于需要处理多个异步操作的情况，而 async/await 适用于需要处理单个异步操作的情况。在实际开发中，我们可以根据具体的业务需求来选择使用 Promise 还是 async/await。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6562ec85d2f5e1655dcab0e4