使用 useFetch 建立数据的连接

抛弃axios, 拥抱fetch

在实际开发中, 我们可以使用 useFetch 来替代axios,

原生的 API

fetch 是浏览器原生的 API，而不需要额外引入第三方库。这意味着你不需要安装和引入额外的库，只需要使用浏览器 API 即可发送异步请求。 fetch 还包含在浏览器的全局对象中，你不需要在每个文件中引入它。

相对地，axios 是一个独立的第三方库，需要使用 npm 包管理工具安装，并引入它的库。这意味着你需要在代码中引入 axios 的库并在每一个使用的文件中进行配置。

更优雅的语法

使用 fetch 发送 HTTP 请求时，可以使用链式调用 then 操作符来获取响应的数据，这种方式相对于 axios 更加简洁和优雅。例如：

javascript

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这个代码块会在浏览器中发起一个 HTTP GET 请求，并在获取到响应后将其转换为 JSON 格式。then 和 catch 方法可以直接在网络响应中进行链式调用，而不需要经过额外的转换。

与之相对地，使用 axios 时则需要使用 .then(data => console.log(data.data)) 这种方式来访问响应数据的主体。而且链式调用的语法在 fetch 中更加方便和直观。

更高的容错性

使用 fetch 发送 HTTP 请求能够更好地处理和处理错误。fetch 并不会在一些情况下自动抛出任何错误，相反，它会将接收到的响应对象解析为成功的 Promise。这允许你更好地控制错误处理和流程，你可以根据响应的状态来编写更具有容错性的代码。

相反地，如果使用 axios，对于某些情况下的错误，如网络故障或服务器错误，它会抛出错误。虽然这看起来是一种便利的做法，但它与处理错误的优雅方法相比，会使代码变得更加复杂。

使用 useFetch 建立数据的连接 ​

使用 useFetch 建立数据的连接