在 SPA（Single Page Application）开发中，数据的取得是一个至关重要的环节。在数据取得上，XMLHttpRequest（XHR）曾经是主流，但现在 Fetch 已经取代了 XHR 成为了现代 Web 开发的一种首选方案。在这篇文章中，我们将深入讨论如何使用 Fetch 在 SPA 应用中取得数据，为你带来深度且有学习和指导意义的内容。
Fetch 是什么？
Fetch 是一个新的 Web API，它提供了一种新的方式来进行网络请求。它比 XHR 更加强大和灵活，并且使用起来更加方便。在 Fetch 中，我们通过建立 Promise 对象来发起网络请求，以获取响应对象。
Fetch 代码示例
下面是一个简单的 Fetch 示例，它展示了如何使用 Fetch 获取一个 JSON 格式的响应。
fetch('https://api.myjson.com/bins/15pra5')
.then(response => response.json())
.then(json => console.log(json));在这个示例中，我们首先使用 fetch() 方法发起一个 GET 请求来获取数据，该请求的 URL 是我们要获取的 JSON 数据的 API 地址。然后我们通过 .then() 函数链来处理从服务器返回的数据。我们首先使用 response.json() 方法，将返回的 JSON 数据转换成一个 JavaScript 对象。然后使用 .then() 方法打印输出该对象。
Fetch 基本参数
fetch() 函数接受两个参数：要获取的 URL 和一个可选的配置对象。配置对象可选，包含一些可配置的请求选项，例如请求方法、请求头、请求 body 等等。
请求方法
在 Fetch 中，请求方法是非常重要的，因为它定义了要对资源执行何种操作。Fetch 支持所有 HTTP 请求方法，例如 GET、POST、PUT、DELETE 等等。请求方法一般通过配置对象的 method 属性定义。
下面是一个 POST 请求的示例：
fetch('/api/data', {
method: 'POST',
body: JSON.stringify(data)
})
.then(response => response.json())
.then(json => console.log(json));在这个示例中，我们使用了 POST 请求方法，并且还通过配置对象传递了要发送的 JSON 数据。
请求头
在 Fetch 中，请求头可用于包含额外的信息，例如身份验证、请求数据类型、语言首选项等等。Fetch 中的请求头也是通过配置对象传递的。
下面是一个设置请求头的示例：
fetch('/api/data', {
headers: {
'Authorization': 'Bearer my-token',
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(json => console.log(json));在这个示例中，我们设置了 Authorization 和 Content-Type 请求头，并将其传递给 fetch() 函数使用。
请求 body
在某些情况下，我们需要将一些数据随 POST 或 PUT 请求一起发送到服务器。Fetch 中可以通过配置对象的 body 属性来实现。body 数据可以是字符串、FormData、Blob、ArrayBuffer 或者 URLSearchParams 实例。
下面是以下列出的其中一个示例：
发送 JSON 数据
// javascriptcn.com 代码示例
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'foo',
age: 25
})
})
.then(response => response.json())
.then(json => console.log(json));在这个示例中，我们将一个 JSON 对象作为请求体发送给服务器。
Fetch 错误处理
当网络请求发生错误时，我们需要有一些机制来处理这些错误。Fetch 提供了 catch() 方法来处理请求过程中出现的任何错误。这个 catch() 方法在 Promise 链中使用，以捕获响应对象的错误。
下面是一个处理 Fetch 错误的示例：
// javascriptcn.com 代码示例
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(json => console.log(json))
.catch(error => console.error('Error:', error));在这个示例中，我们首先检查响应对象是否成功处理 OK；如果不是，我们抛出一个 Error 对象。我们使用 catch() 方法来捕获错误，并打印错误信息。
函数封装
为了在项目中更方便地使用 Fetch，我们可以将其封装成一个函数。这个函数将接受请求参数和返回响应数据。这样我们就可以在项目中的其他组件中使用这个函数，而不必重复代码。
下面是一个基本的 Fetch 封装示例：
// javascriptcn.com 代码示例
function fetchData(url, options = {}) {
return fetch(url, options)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Error:', error));
}在这个示例中，我们首先定义了一个函数，其中传入了一个 URL 和一个可选的配置对象。然后我们在函数内部使用 fetch() 函数获取数据，并返回一个 Promise 对象。在返回数据之前，我们检查了响应对象是否成功，如果不是，我们抛出一个 Error 对象并返回错误消息。
总结
Fetch 是现代 Web 开发中的一个非常强大的工具，它提供了更方便、更强大的方式来进行网络请求。在本文中，我们深入讨论了 Fetch 的各种用法，包括基本参数、错误处理和函数封装。这些知识可以帮助你更好地在 SPA 开发中实现数据取得，并提高你的编程能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654793cf7d4982a6eb1eb6d3