关于前端:Fetch还是Axios哪个更适合HTTP请求

前端开发最重要的局部之一是通过收回 HTTP 申请与后端进行通信，咱们有几种办法能够异步地在 Javascript 中进行 API 调用。

几年前，大多数应用程序都应用 Ajax 发送 HTTP 申请，Ajax 代表异步 Javascript 和 XML。然而当初，开发人员通常会决定在 .fetch() API 和 Axios 之间进行抉择。

在本文中，我想比拟这两种办法，并简要介绍一下基本知识和语法。除此之外，我还将比拟在两种状况下以及在错误处理中将数据转换为 JSON 格局的过程。我还将探讨 HTTP 拦挡和下载进度。

开始吧！

Fetch 概述和语法

在构建 Javascript 我的项目时，咱们能够应用 window 对象，并且它带有许多能够在我的项目中应用的杰出办法。这些性能之一是 Fetch API，它提供了一种简略的全局 .fetch() 办法，这是一种从 API 异步获取数据的逻辑解决方案。

让咱们看一下 .fetch() 办法的语法。

fetch(url)
  .then((res) => 
    // handle response
  )
  .catch((error) => {// handle error})

在下面的示例中，您能够看到简略的获取 GET 申请的语法。在 .fetch() 办法中，咱们有一个强制性参数 url，它返回一个 Promise，能够应用 Response 对象来解决。

.fetch() 办法的第二个参数是选项，它是可选的。如果咱们不传递 options，申请总是 GET，它从给定的 URL 下载内容。

在选项参数外面，咱们能够传递办法或头信息，所以如果咱们想应用 POST 办法或其余办法，咱们必须应用这个可选的数组。

正如我之前提到的，Promise 会返回 Response 对象，正因为如此，咱们须要应用另一个办法来获取响应的主体。有几种不同的办法能够应用，取决于咱们须要的格局：

• response.json()
• response.text()
• response.formData()
• response.blob()
• response.arrayBuffer()

让咱们看一下带有可选参数的代码示例。

fetch(url, {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify(data)
});
  .then((response) => response.json())
  .catch((error) => console.log(error))

在下面的代码示例中，你能够看到简略的 POST 申请，包含 method、header 和 body params。而后我应用 json() 办法将响应转换为 JSON 格局。

当初，让咱们认真看看 axios。

Axios 概述和语法

Axios 是一个 Javascript 库，用于从 Node.js 或 XMLHttpRequests 或浏览器收回 HTTP 申请。作为一个古代的库，它是基于 Promise API 的。

axios 有一些劣势，比方对 XSRF 的爱护或勾销申请。

为了可能应用 axios 库，咱们必须将其装置并导入到咱们的我的项目中。能够应用 CDN，npm 或 bower 装置 axios。当初，让咱们来看一个简略的 GET 办法的语法。

axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

在下面的代码中，你能够看到我应用 .get() 办法创立一个简略的 GET 申请。如果你想在函数中应用 POST 办法，那么只需应用 .post() 办法代替，并将申请数据作为参数传递即可。

当咱们创立配置对象时，咱们能够定义一堆属性，最常见的是：

• baseUrl
• params
• headers
• auth
• responseType

作为响应，axios 返回一个 promise，该 promise 将与响应对象或谬误对象一起解析。在响应对象中，具备以下值：

• data，这是理论的响应主体
• status，调用的 HTTP 状态，例如 200 或 404
• statusText，以文本音讯模式返回的 HTTP 状态，例如 ok
• headers，服务器发回标头
• config，申请配置
• request，XMLHttpRequest 对象

当初，让咱们看一下带有数据的 POST 办法的代码示例。

axios.post({
  '/url', 
  {name: 'John', age: 22},
  {options}
})

在下面的代码中，你能够看到 post 办法，咱们把 config 对象作为 param，其中有 URL、数据和附加选项。

咱们还能够将 config 对象定义为变量，而后像上面的示例一样将其传递给 axios。

const config = {
  url: 'http://api.com',
  method: 'POST',
  header: {'Content-Type': 'application/json'},
  data: {
    name: 'John',
    age: 22
  }
}
axios(config);

在这里，你能够看到所有的参数，包含 URL、数据或办法，都在 config 对象中，所以在一个中央定义所有的货色可能更容易。

JSON

如前所述，当咱们在应用 .fetch() 办法的时候，须要对响应数据应用某种办法，当咱们在发送带有申请的 body 时，须要对数据进行字符串化。

在 axios 中，它是主动实现的，所以咱们只需在申请中传递数据或从响应中获取数据。它是主动字符串化的，所以不须要其余操作。

让咱们看看如何从 fetch() 和 axios 获取数据。

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在下面的例子中，你能够看到，应用 axios 咱们没有额定的一行代码，在 .fetch() 的例子中，咱们必须将数据转换为 JSON 格局。在一个较大的我的项目中，如果你创立了大量的调用，那么应用 axios 来防止反复代码会更难受。

错误处理

在这一点上，咱们还须要给 axios 点赞，因为处理错误是非常容易的。如果呈现像 404 这样的谬误响应，promise 就会被回绝并返回一个谬误，所以咱们须要捕捉一个谬误，咱们能够查看它是什么类型的谬误，就是这样。让咱们看看代码示例。

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {if (error.response) {
      // When response status code is out of 2xx range 
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      // When no response was recieved after request was made
      console.log(error.request)
    } else {
      // Error
      console.log(error.message)
    }
  })

在下面的代码中，当响应良好时，我返回了数据，然而如果申请以任何形式失败，我就可能查看 .catch() 局部中的谬误类型并返回正确的音讯。

对于 .fetch() 办法，就比较复杂了。每次咱们从 .fetch() 办法中失去响应时，咱们须要查看状态是否胜利，因为即便不是，咱们也会失去响应。在 .fetch() 的状况下，只有当申请没有实现时，promise 才会被解决。让咱们看一下代码示例。

fetch('url')
  .then((response) => {if (!response.ok) {throw Error(response.statusText);
    }
    return response.json()})
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

在这段代码中，我曾经在承诺对象中查看了代码的状态，如果响应有状态 ok，那么我就能够解决并应用 .json() 办法，但如果没有，我必须在 .then() 外面返回谬误。

为了不便和正确的错误处理，对于你的我的项目来说，axios 相对会是一个更好的解决方案，但如果你正在构建一个只有一两个申请的小我的项目，应用 .fetch() 是能够的，但你须要记住正确处理错误。

下载进度

当咱们须要下载大量的数据时，一种跟踪进度的办法会很有用，特地是当用户的网络速度很慢时。晚期，为了实现进度指标，开发者应用了 XMLHttpRequest.onprogress 回调。在 .fetch() 和 axios 中，有不同的办法来实现。

为了在 .fetch() 中跟踪下载进度，咱们能够应用其中一个 response.body 属性，一个 ReadableStream 对象。它逐块提供主体数据，并容许咱们计算工夫耗费了多少数据。

在 axios 中，实现一个进度指示器也是可能的，而且更容易，因为存在一个现成的模块，能够装置和实现，它叫做 Axios Progress Bar。

如果你有大量的大数据要下载，你想跟踪进度指标的进度，你能够用 axios 来治理，更容易更快，但 .fetch() 也提供了这种可能性，只是它须要更多的代码来开发同样的后果。

HTTP 拦挡

当咱们须要查看或扭转咱们从应用程序到服务器的 HTTP 申请时，或者以其余形式，例如，为了验证，HTTP 拦挡可能是重要的。

在 axios 的状况下，HTTP 拦挡是这个库的要害性能之一，这就是为什么咱们不须要创立额定的代码来应用它。让咱们看一下代码示例，看看咱们能做到如许容易。

// 申请拦挡
axios.interceptors.request.use((config) => {console.log('Request sent');
})
// 响应拦挡
axios.interceptors.response.use((response) => {
  // do an operation on response
  return response
})
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在代码中，您能够看到申请拦挡和响应拦挡。在第一种状况下，我创立了一个 console.log，告知发送申请的状况，在响应拦挡中，咱们能够对响应做任何操作，而后返回。

.fetch() 默认不提供 HTTP 拦挡性能，咱们能够笼罩 .fetch() 办法，定义发送申请过程中须要产生的事件，当然，这须要更多的代码，可能比应用 axios 性能更简单。

总结

在这篇文章中，我比拟了用于创立 HTTP 申请的两种办法，从简略的概述开始，通过语法和一些重要的性能，如下载进度或错误处理。

通过比拟能够看出，对于有大量 HTTP 申请，须要良好的错误处理或 HTTP 拦挡的利用，Axios 是一个更好的解决方案。在小型我的项目的状况下，只须要几个简略的 API 调用，Fetch 也是一个不错的解决方案。

在抉择我的项目的最佳解决方案时，还要留神一个因素，这是十分重要的。大多数浏览器和 Node.js 环境都反对 Axios，而古代浏览器仅反对 Fetch，并且某些版本可能会与旧版本一起公布。

通过这些常识的理解，心愿大家可能抉择出最适宜本人的计划，也心愿大家感觉这个比拟有帮忙。

感谢您的浏览❤

起源：https://medium.com
作者：Harsh Patel