在前端开发中，我们经常需要通过 API 接口与后台进行数据交互，而网络请求则是实现这种数据交互最基础的手段之一。而使用 fetch API 进行网络请求已经成为了前端开发中很常用的操作。但是，直接使用 fetch 进行请求存在一些问题，比如需要手动处理请求状态等问题。ES8 的 async/await 是 JavaScript 新增的异步编程方案，它的目标就是让异步代码更加易读、易维护。本文将通过封装 fetch，来展示 async/await 的强大特性，以实现更加友好的网络请求。
1. fetch 简介
fetch 是 JavaScript 提供的一种用于网络请求的新接口，它的优势在于：
- 它返回的是一个 Promise 对象，可使用 then() 方法和 catch() 方法进行数据处理。
- 它的语法直观简单，易于理解；
接下来，我们通过一个基本的 fetch 请求来了解其使用方法：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))首先，我们使用 fetch() 方法传入要请求的 API 地址，fetch 方法会返回一个 Promise 对象，因此我们可以使用 then() 方法和 catch() 方法进行后续操作。在 then() 方法内部，我们将返回的 Response 对象解析成 JSON 格式数据，并进行进一步的处理。如果出现错误，则通过 catch() 方法处理。
2. async/await 简介
async/await 是一种异步编程的解决方案，它对应的是 Promise 对象的写法，使异步编程更加简洁。
一般情况下，async 函数返回一个 Promise 对象，我们可以通过 then() 方法进行后续操作，如下所示：
async function getData() {
const response = await fetch('https://api.example.com/data')
const data = await response.json();
return data;
}
getData().then(data => console.log(data));在上面的代码中，我们通过 async 关键字定义了一个异步函数 getData()，这个函数中使用了 await 来等待 fetch 的返回结果，并将返回结果解析成 JSON 数据。最后通过 return 将结果返回给调用方。
虽然在使用 async 函数中可以通过 then() 方法进行后续操作，但是后续操作可能会很多，导致代码难以维护。因此，我们可以在 async 函数内部使用 try-catch 语句来处理异常。
3. 代码实现
我们将使用 async/await 和 Promise 等技术来封装一个简单的 fetch 请求。以下是代码示例：
-- -------------------- ---- -------
----- ------- - ----- ----- -------- -- -
--- -
----- -------- - ----- ---------- ---------
----- ---- - ----- ----------------
-- ------------- -
------ -----
-
----- --- ------------
- ----- ------- -
----- --- -------------
-
--在上述代码中，我们定义了一个 async 函数 request，它接受两个参数：url 和 options。其中 options 对象包含了 fetch 请求需要的配置信息。
在函数内部，使用 try-catch 语句来进行异常处理。我们首先使用 await 关键字等待 fetch 请求的返回结果，并将返回结果解析成 JSON 数据。在判断返回数据状态时，我们使用了 response.ok 属性。当 response.ok 为 true 时，代表请求成功；当 response.ok 为 false 时，代表请求失败，我们将抛出错误。
接下来，我们通过 throw new Error 将数据返回给调用方。由于在抛出错误时，请求的数据信息将会被丢失，因此可以将请求的数据信息作为错误信息附加在 Error 对象中，方便调试和维护。
4. 使用示例
最后，我们使用上述 request 函数进行一个实际的网络请求，以演示其使用方法：
-- -------------------- ---- -------
----- ------- - ----- -- -- -
----- --- - -------------------------------
----- ------- - -
------- ------
-------- -
--------------- ------------------
-
--
--- -
----- ---- - ----- ------------ ---------
------------------
- ----- ------- -
-----------------------------
-
--
----------在上述代码中，我们定义了一个异步函数 getData，实现了一个请求 https://api.example.com/data 的案例。
在函数内部，我们通过 await request(url, options) 方式调用封装好的 request 函数，并将请求的 URL 和配置信息作为参数传递过去。在try-catch 块中，我们通过 await 等待 request 请求的返回结果。请求成功时，返回数据将被解析成 JSON 数据，并输出在控制台中；请求失败时，错误信息将被输出到控制台。
5. 总结
在本文中，我们通过封装 fetch 和使用 async/await，实现了一个简洁易读的网络请求，利用 async/await 来避免了多重回调嵌套，使得代码逻辑更加清晰，易于维护。在日常开发中，可使用 async/await 来封装自己的网络请求函数，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64795b86968c7c53b0562ccf