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