Promise 与 async/await 的互相转换
Promise 和 async/await 是 JavaScript 中实现异步编程的两种方式，它们都是在处理异步操作时非常常用的工具。在前端开发中，我们经常会遇到需要进行异步操作的情况，例如从服务器获取数据、读取本地文件、用户输入等等。而 Promise 和 async/await 都是为了方便处理这些异步操作而产生的。在本篇文章中，我们将会详细介绍 Promise 和 async/await 的使用以及在它们之间进行互相转换的方法。
Promise 的基本用法
Promise 是在 ES6 中新增的一种用于处理异步操作的对象，Promise 有三种状态，分别是 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
创建一个 Promise 对象通常会使用 new Promise() 方法，它的基本结构如下：
new Promise((resolve, reject) => {
// 进行异步操作
})其中，resolve 和 reject 是两个函数，resolve() 用于将 Promise 对象的状态从 pending 转为 fulfilled，reject() 则用于将 Promise 对象的状态从 pending 转为 rejected。
下面的示例演示了如何使用 Promise 来进行一个简单的异步操作：
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Promise 已执行成功！");
}, 1000);
});
promise1.then((value) => {
console.log(value);
});输出结果为：Promise 已执行成功！
在以上的示例代码中，我们使用 new Promise() 方法创建了一个 Promise 对象，然后使用 setTimeout() 函数模拟了一个异步操作。在异步操作完成后，我们通过 resolve() 函数将 Promise 对象的状态从 pending 改变为 fulfilled，并将一个字符串作为值传递给了 then() 方法。最终，在 then() 方法中打印了 Promise 对象返回的字符串。
async/await 的基本用法
async/await 是 ES2017 中新推出的一种用于处理异步操作的方式，它是基于 Promise 的进一步封装，使代码更加简洁易读。
async/await 语法简单直观，在使用过程中，只需要在函数前加上 async 关键字，然后在函数内部通过 await 来等待一个 Promise 对象的完成，引擎会自动将 await 后面的代码转化为 then() 方法中的回调函数。
下面的示例演示了如何使用 async/await 来进行一个简单的异步操作：
// javascriptcn.com 代码示例
function delay() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("async/await 已执行成功！");
}, 1000);
});
}
async function async1() {
const result = await delay();
console.log(result);
}
async1();输出结果为：async/await 已执行成功！
在以上的示例代码中，我们使用 async/await 来简化了 Promise 的操作过程。在 async1() 函数中，我们使用 await 来等待 delay() 函数的完成，并且将返回值赋值给 result 变量。之后直接通过 console.log() 方法打印出异步操作的结果。
Promise 与 async/await 的互相转换
在实际开发中，我们可能需要将 Promise 转换为 async/await，或者将 async/await 转换为 Promise。下面介绍两个方法，分别是将 Promise 转换为 async/await 和将 async/await 转换为 Promise。
将 Promise 转换为 async/await
我们可以将 Promise 对象封装在一个函数中，然后加上 async 关键字，即可将 Promise 转换为 async/await 形式。
下面的示例演示了如何将 Promise 转换为 async/await：
// javascriptcn.com 代码示例
function getData() {
return new Promise((resolve, reject) => {
const data = { name: "Jack", age: 30 };
resolve(data);
});
}
async function useAsync() {
const data = await getData();
console.log(data);
}
useAsync();输出结果为：{ name: 'Jack', age: 30 }
在以上的示例代码中，我们将一个 async 函数封装了一个返回 Promise 对象的 getData() 函数。在使用过程中，我们将其赋值给 data 变量并打印了返回结果。
将 async/await 转换为 Promise
我们可以通过在 async 函数中使用 try/catch 来捕获异常，然后通过 Promise.reject() 或 Promise.resolve() 方法将其转换为 Promise 对象。
下面的示例演示了如何将 async/await 转换为 Promise：
async function useAsync() {
try {
const data = await getData();
return Promise.resolve(data);
} catch (error) {
return Promise.reject(error);
}
}在以上的示例代码中，我们在 async 函数中使用 try/catch 来捕获异常，并在 catch() 方法中通过 Promise.reject() 方法将异常信息封装为 Promise 对象。在 try() 方法中通过 Promise.resolve() 方法将执行结果封装为 Promise 对象。
总结
在本篇文章中，我们详细介绍了 Promise 和 async/await 的使用以及在它们之间进行互相转换的方法。在实际开发中，我们需要根据实际情况，灵活选择 Promise 和 async/await 两种方式来处理异步操作。当需要更加简洁易读的代码时，我们可以选择 async/await，当需要更多的控制和灵活性时，我们可以选择 Promise。通过对 Promise 与 async/await 的互相转换，我们可以更好地处理异步操作，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538817e7d4982a6eb15b96b