在前端开发中,与后端进行数据交互是非常常见的操作。在过去,我们使用 XMLHttpRequest (XHR) 对象来实现这个功能。然而,随着 Web 技术的不断发展,Fetch API 成为了更好的选择。
Fetch API 简介
Fetch API 是一种用于进行网络请求的新标准,它提供了一个简单、强大和灵活的接口来处理 HTTP 请求。Fetch API 基于 Promise 实现,这使得异步编程更加方便和可读。
Fetch API 只是浏览器提供的原生 API 的一部分,所以你无需安装任何额外的库或框架就可以使用它。
下面是一个基本的 Fetch API 请求示例:
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
在这个示例中,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 进行文件上传的示例:
-- -------------------- ---- ------- ------ ----------- ---------------- ------- -------------------------------------- -------- -------- ------------ - ----- --------- - -------------------------------------- ----- ---- - ------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------