在前端开发中，处理网络请求是一个常见的需求，我们通常使用 Ajax 或 XMLHttpRequest 对象来发送请求和接收响应。然而，这些方法存在一些限制和缺陷，如不能跨域请求、不能处理 Promise 等。
ES6 引入了 fetch API，它是一种新的网络请求方式，提供了更加简单、灵活和强大的请求和响应处理方式。本文将介绍如何使用 ES6 fetch API 来处理网络请求。
基本使用
使用 fetch API，我们可以用以下方式发送 GET 请求：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error))
这里，我们传入了一个 URL，fetch 方法会返回一个 Promise 对象，我们可以对其进行链式调用，使用 then 方法对响应进行处理。在第一个 then 方法中，我们将响应对象转换为 JSON 格式，然后在第二个 then 方法中打印出数据。如果发生错误，我们可以使用 catch 方法进行处理。
如果要发送 POST 请求，可以使用以下方式：
-- -------------------- ---- -------
---------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------这里，我们传入了一个 URL 和一个配置对象。在配置对象中，我们指定了请求方式为 POST，请求头为 JSON 格式，请求体为数据对象的 JSON 格式。同样地，我们可以对响应进行链式调用和处理。
处理响应
在 fetch API 中，响应对象是一个 Response 类型的对象，它包含了响应的状态码、头信息和响应体等信息。
我们可以使用以下方式获取响应状态码：
-- -------------------- ---- -------
----------
-------------- -- -
-- ------------- -
------ ---------------
- ---- -
----- --- -------------- -------- --- --- -----
-
--
---------- -- ------------------
------------ -- ---------------------这里，我们在第一个 then 方法中判断响应是否成功，如果成功，则将响应转换为 JSON 格式，否则抛出错误。在第二个 then 方法中，我们打印出数据。
我们也可以使用以下方式获取响应头信息：
fetch(url)
.then(response => {
console.log(response.headers.get('Content-Type'))
return response.json()
})
.then(data => console.log(data))
.catch(error => console.error(error))这里，我们在第一个 then 方法中使用 headers.get 方法获取 Content-Type 头信息，然后在第二个 then 方法中打印出数据。
处理错误
在使用 fetch API 进行网络请求时，可能会出现网络错误、服务器错误或响应解析错误等问题。我们可以使用 catch 方法来捕获这些错误并进行处理。
-- -------------------- ---- -------
----------
-------------- -- -
-- ------------- -
------ ---------------
- ---- -
----- --- -------------- -------- --- --- -----
-
--
---------- -- ------------------
------------ -- ---------------------这里，我们在第一个 then 方法中判断响应是否成功，如果成功，则将响应转换为 JSON 格式，否则抛出错误。在 catch 方法中，我们捕获错误并打印出错误信息。
总结
使用 ES6 fetch API 处理网络请求，可以提供更加简单、灵活和强大的请求和响应处理方式。在使用 fetch API 进行网络请求时，我们可以使用 Promise 的链式调用来对响应和错误进行处理。同时，我们也可以使用 Response 类型的对象来获取响应的状态码、头信息和响应体等信息。在处理网络请求时，我们应该注意网络错误、服务器错误或响应解析错误等问题，并进行相应的处理。
示例代码
以下是一个使用 ES6 fetch API 处理网络请求的示例代码：
-- -------------------- ---- -------
----- --- - --------------------------------------------
-- -- --- --
----------
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------
-- -- ---- --
----- ---- - -
------ ------
----- ------
------- -
-
---------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c4c1a2add4f0e0fff55e39