Axios 与 Fetch

php中文网 2024-10-15 11:58:04

葡萄牙语版本

axios 和 fetch 是在 javascript 中发出 http 请求的流行工具，但它们有一些关键的区别。总结如下：

阿克西奥斯

内置功能：axios 具有许多内置功能，例如自动 json 转换、请求和响应拦截器以及请求取消。
浏览器兼容性：支持旧版浏览器，包括 internet explorer。
错误处理：axios 自动拒绝 http 错误状态（例如 404 或 500）的 promise，使错误处理更容易。
请求/响应拦截器：允许您以简单的方式全局修改请求或响应。
请求取消：axios 提供了一种简单的方法来取消请求。

拿来

原生 api：fetch 是原生 web api，这意味着无需安装额外的库。
promise-based：使用promise，但需要手动检查响应状态是否有错误。
流处理：fetch 支持流，这对于处理大型响应非常有用。
更多控制：提供对请求的更多控制，但需要更多额外代码来实现设置模式或拦截请求等功能。
没有内置对 json 的支持：您需要在响应对象上调用 .json() 来解析 json 数据。

使用案例

如果您需要一组丰富的开箱即用功能，特别是对于复杂的应用程序，请使用 axios。
使用 fetch 来实现更简单的用例或当您想避免外部依赖时。

使用示例

axios：

axios.get('/api/data')
  .then(response =&gt; console.log(response.data))
  .catch(error =&gt; console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'post',
  headers: {
    'accept': 'application/json',
    'content-type': 'application/json;charset=utf-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response =&gt; {
    console.log(response.status);
  });

获取：

fetch('/api/data')
  .then(response =&gt; {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data =&gt; console.log(data))
  .catch(error =&gt; console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) =&gt; response.json())
  .then((data) =&gt; {
    console.log(data);
  });