HTTP 请求库Fetch vs Axios

我不是女神ヾ 2023-10-01 18:59 6阅读 0赞

在我们之前的文章[“如何使用 Axios 发出 HTTP 请求][Axios _ HTTP]”中，我们已经解释了如何使用 Axios 发送基本的 CRUD 请求。使用 Axios 的主要好处之一是发送请求时自动进行 JSON 字符串化。[本机Fetch API][Fetch API]不支持的功能。

我们的帖子得出结论，Axios 是一个轻量级库，在处理 HTTP 请求时提供了许多有用的功能。例如，Axios 提供了一种通过其请求配置来跟踪上传进度的简单方法。此外，Axios 允许您定义拦截器以轻松地自动执行请求的特定任务。

不过，让我们也看看 Fetch API。您可以使用 Fetch API 执行相同的任务。最重要的是，Fetch API 已经在所有现代浏览器中可用。

本文旨在为您提供这两种工具的概述，以便您在选择发送 HTTP 请求的工具时做出更明智的决定。

我们会比较：

*  CRUD 操作
 *  自动 JSON 解析
 *  拦截器
 *  错误处理
 *  请求超时功能

### **比较：CRUD 操作和自动 JSON 解析** ###

我们先来看看发送基本请求。[让我们从typicode.com][typicode.com]上的公开 API 中检索一些数据。

首先，Axios 对象公开了不同的方法来从 API 中检索、发送、更新或删除资源。

*  `axios.get(url[, config])`
 *  `axios.post(url[, data[, config]])`
 *  `axios.put(url[, data[, config]])`
 *  `axios.patch(url[, data[, config]])`
 *  `axios.delete(url[, config])`

对于`GET`请求，该函数接受 API URL 和可选配置对象。

我们可以使用该`config`对象来发送额外的参数或标头。您可以在 Axios 文档中找到所有可能的[请求配置参数。][Link 1]

const response = await axios.get('https://jsonplaceholder.typicode.com/todos', {
        params: {
            ID: 1
        },
        headers: {'X-Custom-Header': 'foobar'},
    });

现在，让我们看一下`fetch()`版本。fetch API 与 Axios API 相同。请注意，您可以通过对象将任何方法传递给`fetch()`函数`options`。

*  `fetch(url, [options])`

如您所见，它接受一个 API URL 和一个`options`对象。我们必须通过选项对象传递方法。此外，我们还可以使用此对象传递标头、参数或正文。

const options = {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
     
    fetch('https://jsonplaceholder.typicode.com/todos/1', options)
      .then(response => response.json())
      .then(console.log)

请注意，在我们记录返回的数据之前，我们必须手动将解析响应对象解析为 JSON。Axios 自动负责解析对 JSON 的响应。

### **比较：拦截器** ###

Axios 为请求和响应提供了[拦截器。][Link 2]换句话说，您可以在将请求发送到 API 之前对其进行修改，或者修改已返回的响应对象。这是一个强大的概念，可以实现特定任务的自动化。

您可以使用请求拦截器自动添加授权标头。此外，响应拦截器可用于修改响应对象以适应不同的格式。甚至可以拦截错误响应并将它们发送到监控工具。

这是我们之前教程中使用的 Axios 拦截器的示例。该`axios.interceptors.request.use()`方法允许您定义请求拦截器。

axios.interceptors.request.use(config => {
        config.name = 'my-axios-app'
        console.log(`Sending ${config.method} request to: ${config.url}`);
      
        return config;
    }, error => {
        return Promise.reject(error);
    });
      
    // send GET request
    axios.get('https://jsonplaceholder.typicode.com/todos/1')

我们怎样才能做到这一点`fetch()`？默认情况下，`fetch()`不支持定义请求拦截器的方式。幸运的是，我们可以回退到覆盖函数，这样我们就可以向 fetch 方法添加自定义逻辑。

fetch = (originalFetch => {
        return (...arguments) => {
            console.log('Adding headers')
     
            arguments[1].headers = {
                'Accept': 'application/json'
            }
     
          return originalFetch.apply(this, arguments);
        };
    })(fetch);
      
    fetch('https://jsonplaceholder.typicode.com/todos/1', { method: 'GET' })
        .then(response => response.json())
        .then(data => {
          console.log(data) 
        });

如您所见，覆盖原始`fetch()`函数会影响代码的可读性。就个人而言，我更喜欢使用 Axios 的请求和响应拦截器。然而，有一个 NPM 包允许您以`fetch()`更易读的方式将自定义拦截器注册到该方法。该包称为[fetch-intercept][]。这是解决问题的示例。

接下来，让我们了解这两种工具如何处理错误。

### **比较：错误处理** ###

`fetch()`了解 Axios 和错误处理之间的区别很重要。当 Axios 收到 404 或 400 错误时，它会使用`catch()`块捕获错误。此`catch()`块允许您处理错误。

相反，Fetch API 更喜欢通过该方法成功完成请求，`then()`但包含 400 状态。我们也可以在[fetch()文档][fetch]中找到它。

> **即使响应是 HTTP 404 或 500，从 fetch() 返回的 Promise 也不会拒绝 HTTP 错误状态。相反，它将正常解析（将 ok 状态设置为 false），并且只会在网络故障时拒绝或者如果有任何事情阻止请求完成。**

您可以使用以下代码自己尝试一下。

const url = 'https://jsonplaceholder.typicode.com/toodoos/1'
    axios.get(url)
        .then(response => console.log('good'))
        .catch(error => console.error('error')) // enters catch method -> prints 404
     
    fetch(url, { method: 'GET' })
        .catch(error => console.log('BAD', error))
        .then(response => console.log('GOOD', response.status, response.statusText)); // enters then method -> prints 404 status

最后，这是个人喜好。一些行业专家争辩说，请求没有失败，所以它成功完成了。这与服务器是否可以找到资源无关。

但是，知道何时使用两个库之一是一个显着的区别。

### **比较：如何使请求超时？** ###

能够为请求定义超时可以防止您的应用程序*挂起*请求。这些挂起的请求会减慢您的应用程序或导致内存泄漏，因此非常危险。

正如[Roberto Vitillo 所说][Roberto Vitillo]，“现代应用程序不会崩溃；他们挂了。其主要原因之一是假设网络是可靠的。不是。”

那么，Axios 和 Axios 是如何`fetch()`处理请求超时的呢？

首先，Axios 没有设置默认超时。因此，它依赖于浏览器的请求超时。在 Chrome 中，网络请求在 300 秒时超时。那太长了。让我们使用`config`对象来改变它。下面的示例在 1000 毫秒的等待时间后中止请求。

const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1', {
        timeout: 1000
    });

因为`fetch()`，本来是[没有办法设置超时的][Link 3]。幸运的是，我们可以使用支持请求超时的实验性[Abort API][]。这是一个如何在 1000 毫秒后中止请求的示例`fetch()`。

const controller = new AbortController();
    const fetchPromise = fetch('https://jsonplaceholder.typicode.com/todos/1', { signal: controller.signal });  
     
    // Abort request using setTimeout
    setTimeout(() => controller.abort(), 1000); 
     
    fetchPromise.then(response => {
        // Finished request
        console.log(response)
    })

注意我们如何使用`AbortController`并通过我们的`config`对象将中止信号传递给`fetch()`方法。一旦`setTimeout()`计时器用完，它将调用`abort()`控制器对象上的方法。这个中止调用会向我们的`fetch()`调用发送中止信号。

同样，`fetch()`选择更长的解决方法来实现请求超时。

### **结论** ###

Axios 提供了比`fetch()`. 使用的最大缺点`fetch()`是为您的请求设置超时的详细解决方法。这是防止挂起请求的急需功能。

另一方面，请记住 Axios 将默认超时设置为零。因此，不要忘记为每个请求设置超时。或者，您可以使用请求拦截器来自动设置请求超时。

此外，特别是对于 Node.js，自动 JSON 解析是一个有用的功能，可以让您的代码保持干净。同样，您可以使用 Fetch API 的拦截器将响应对象自动解析为 JSON。

然而，正如本指南中所见，我们必须覆盖`fetch()`添加自定义逻辑的方法。我认为它增加了代码的复杂性。出于这个原因，Axios 是基于其简单性和易用性发送 HTTP 请求的明显赢家。

[Axios _ HTTP]: https://blog.asayer.io/how-to-make-http-requests-with-axios
[Fetch API]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[typicode.com]: https://jsonplaceholder.typicode.com/todos/
[Link 1]: https://github.com/axios/axios#request-config
[Link 2]: https://github.com/axios/axios#interceptors
[fetch-intercept]: https://www.npmjs.com/package/fetch-intercept
[fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#differences_from_jquery
[Roberto Vitillo]: https://robertovitillo.com/default-timeouts/
[Link 3]: https://github.com/whatwg/fetch/issues/951
[Abort API]: https://developer.mozilla.org/en-US/docs/Web/API/AbortController#examples