《HelloGitHub》第 28 期

阅读时长 4 分钟读完

在前端开发中,与后端进行数据交互是非常常见的操作。在过去,我们使用 XMLHttpRequest (XHR) 对象来实现这个功能。然而,随着 Web 技术的不断发展,Fetch API 成为了更好的选择。

Fetch API 简介

Fetch API 是一种用于进行网络请求的新标准,它提供了一个简单、强大和灵活的接口来处理 HTTP 请求。Fetch API 基于 Promise 实现,这使得异步编程更加方便和可读。

Fetch API 只是浏览器提供的原生 API 的一部分,所以你无需安装任何额外的库或框架就可以使用它。

下面是一个基本的 Fetch API 请求示例:

在这个示例中,fetch() 方法发送一个 GET 请求到指定的 URL,并返回一个 Promise 对象。我们可以使用 .then().catch() 方法对 Promise 进行处理。

在第一个 .then() 中,我们将响应对象(即 response)转换成 JSON 格式的响应体,并将其传递给下一个 .then() 处理。在第二个 .then() 中,我们将解析后的数据输出到控制台中。如果出现错误,我们就会进入 .catch() 方法中进行处理。

Fetch API 请求的详细设置

Fetch API 提供了多种选项用于自定义请求。下面是一些主要的选项:

  • method:指定 HTTP 请求方法,如 GET、POST、PUT、DELETE 等。
  • headers:指定 HTTP 请求头,可以包括自定义头部和标准头部,如 Content-Type、Accept、Authorization 等。
  • body:指定 HTTP 请求体,可以是字符串、Blob 对象或 FormData 对象等。
  • mode:指定请求模式,如 cors、no-cors 或 same-origin。cors 模式允许跨域请求,no-cors 模式不允许跨域请求,same-origin 模式只允许相同源请求。
  • cache:指定缓存模式,如 default、no-store、reload 或 force-cache。default 模式使用浏览器默认缓存策略,no-store 模式禁止缓存,reload 模式强制从服务器重新获取资源,force-cache 模式强制使用缓存。
  • credentials:指定是否发送 cookies 和其他凭据信息,如 omit、same-origin 或 include。omit 表示不发送任何凭据,same-origin 表示只发送同源凭据,include 表示发送所有凭据。

下面是一个带有自定义选项的 Fetch API 请求示例:

-- -------------------- ---- -------
----- ------- - -
  ------- -------
  -------- - --------------- ------------------ --
  ----- ---------------- --------- ------- --------- -------- ---
  ----- -------
  ------ -----------
  ------------ -------------
--

---------- --------
  -------------- -- ----------------
  ---------- -- ------------------
  ------------ -- ----------------------

在这个示例中,我们定义了一个包含多个选项的对象 options,然后将其作为第二个参数传递给 fetch() 方法。这个请求使用 POST 方法发送 JSON 格式的数据,并且使用了 cors 模式和 same-origin 凭据。

使用 Fetch API 进行文件上传

Fetch API 不仅可以用于发送文本数据,还可以用于发送二进制数据,例如文件。下面是一个使用 Fetch API 进行文件上传的示例:

-- -------------------- ---- -------
------ ----------- ----------------
------- --------------------------------------

--------
-------- ------------ -
  ----- --------- - --------------------------------------
  ----- ---- - -------------------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈