在 ES7 中使用 fetch 函数进行网络请求
随着互联网的不断发展，前端工程师经常需要进行网络请求操作。而传统的 XMLHttpRequest （XHR） API 已经逐渐被新出的 fetch API 取代。在 ES7 中使用 fetch 函数进行网络请求，可以大大简化代码实现，提高代码的可读性和语义性。
相较于 XHR，fetch 的语法更加简洁，链式调用更方便，返回格式也更加统一规范。同时，fetch 对跨域请求天然支持，不需要额外设置代理等操作，非常方便。
fetch 函数的基础用法
在使用 fetch 函数之前，需要引入 es6-promise 和 isomorphic-fetch 库。这两个库可以为我们提供 Promise 和 fetch 的 polyfill 支持。
首先，我们来看一个最基础的 fetch 请求示例：
-- -------------------- ---- ------- ------ ------------------- ------ ----- ---- ------------------- ------------------ -------------- -- - ------ ---------------- -- ---------- -- - ------------------ ---展开代码
上面的代码中，我们首先引入了 es6-promise 和 isomorphic-fetch 库。然后通过 fetch('/api/data') 发起了一个 url 为 /api/data 的请求。得到 response 后，我们可以通过 response.json() 把响应内容转换为 JSON 格式。
接着，我们又通过 then 方法进行链式调用，并在第二个 then 方法中，把返回的 data 打印在了控制台上。这种链式调用的形式和 Promise 的写法非常相似，也更加简洁。
当然，在实际项目中，我们不仅需要请求数据，还需要能够对返回的数据进行处理和使用。接下来，我们就讨论一下如何使用 fetch 函数完成更多的操作。
fetch 函数的进阶使用方式
fetch 函数除了基础的用法，还有很多进阶的使用方式。
- 发送 POST 请求
在发送 POST 请求时，我们需要手动设置请求方法、请求头、body 等参数。下面是一个简单的 POST 示例：
-- -------------------- ---- ------- ------------------ - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ----- ----- ----- ------ --------------------- -- -- -------------- -- ---------------- ---------- -- -------------------展开代码
在 POST 请求中，我们需要通过 method 参数来指定请求方法为 POST。同时，通过 headers 参数来设置请求头，告诉服务器请求的数据类型。最后，通过 body 参数来设置请求体，也就是具体的请求内容。
- 处理请求错误
如果请求过程中出现错误，比如请求超时、网络错误等，代码中将会报错。为了更好地处理错误，我们需要在代码中添加错误情况的处理。
下面是一个简单的错误处理示例：
-- -------------------- ---- ------- ------------------ -------------- -- - -- -------------- - ----- --- -------------- -------- -- --- ----- - ------ ---------------- -- ---------- -- ------------------ ------------ -- ----------------------展开代码
当响应的状态码不处于 200 ~ 299 之间时，我们手动抛出一个错误，通过 catch 方法处理错误。在错误处理中，我们可以选择使用如 console.error 等方法来输出错误信息或者使用如 Sentry 等工具进行上报。
- 并发请求
如果我们需要同时发起多个网络请求，可以使用 Promise 的 Promise.all 方法，实现并发请求的效果。
下面是一个并发请求的示例：
-- -------------------- ---- ------- -- - ----- ------------- -------------------- -------------------- ------------------- -- --------------- -- ---------------------------------- -- ------------------ ---------- -- ------------------ ------------ -- ----------------------展开代码
在上面的代码中，我们同时发起了 3 个请求，然后通过 Promise.all 方法将请求结果统一处理。最后，我们把返回的多个请求结果都打印在了控制台上。
结语
在 ES7 中使用 fetch 函数进行网络请求是现在前端开发不可或缺的技能之一。fetch 的语法简单明了、链式调用便利、替代了旧的 XHR API。除此之外，fetch 还具有对跨域请求天然支持的优点。当然，在使用 fetch 进行网络请求时，我们也需要注意处理错误情况和并发请求时的处理方式，来保证程序的正确性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cdf396e46428fe9e7b86d7
