Axios 与 Fetch 对比

各位开发者大家好！我们目前使用 Axios 或 fetch 与服务器进行数据通信/交换。两者都能完美满足您的需求。今天我们将详细介绍它们在功能方面的区别。

1. 请求 URL

Axios — 请求对象中有 url

axios
  .get(url, {
    headers: {
      'Content-Type': 'application/json',
    },
    timeout: 1000 * 60,
  })
  .then(res => {

  })
  .catch(err => {

  })

Fetch — 请求对象中没有 url。

 fetch(url)
  .then((response) => response.json())
  .then((json) => {  

  })
  .catch(() => {

  })

2. 包装

Axios — 需要手动安装的第三方包。Github 上有 85.3k 个 Star — 管理良好且功能丰富的库。Fetch
npm i axios
—内置于大多数浏览器，无需安装。

3. CSRF保护

Axios — 内置 CSRF（跨站请求伪造）支持，以防止跨站请求。Fetch — 不支持
CSRF

4.请求数据

Axios - 请求数据包含对象，可以直接在请求数据中发送 JSON 对象

axios
  .post(url, jsonObject, {
    headers: {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then((res) => {
    if (res) {
      return res.data;
    }
  })
  .catch((err) => {
    return err;
  });

获取——请求数据应该字符串化

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(jsonObject),
})
.then((response) => response.json())

.then((json) => {

})
.catch(() => {

});

如果你想启动新的 React 项目 — — 请查看React Clean Architecture

5. 响应解析

Axios——
为开发人员提供内置的 JSON 转换响应

axios
  .post(url, jsonObject, {
    headers: {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then(res => {
    if (res) {
      return res.data; // Directly get JSON in Step - 1 Only - Managed by Axios
    }
  })
  .catch(err => {
    return err;
  })

获取— 有两个步骤，首先将响应转换为 json，然后在第二个过程中开发人员将获得 json 响应

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(jsonObject)
}).then((response) => response.json()) // Response Convert To JSON in this Step - 1
  .then((json) => {
    // Get JSON Object Here in Step - 2
  })
  .catch(() => {


  })

6. 取消请求

Axios — 如果用户离开屏幕/组件，axios 允许开发人员取消请求

const cancelTokenSource = axios.CancelToken.source();

 axios.get('/listing/1', {
  cancelToken: cancelTokenSource.token
 });

 // Cancel request
 cancelTokenSource.cancel();
 Fetch - doesn’t support Cancel API request

Fetch — 不支持取消 API 请求

7. 请求拦截器

Axios — 具有拦截 HTTP 请求
获取的内置功能— 不提供拦截 http 请求的方法。

8.上传/下载请求进度

Axios — 支持开发者提供数据传输进度，以便开发者在用户与服务器通信时显示加载指示器
。Fetch — 不支持上传/下载进度

9.浏览器支持

Axios — 具有侧浏览器功能支持
Fetch — 仅支持有限的浏览器和版本，例如 Chrome 42+、Firefox 39+、Edge 14+、Safari 10.1。

感谢您阅读博客！

鏂囩珷鏉ユ簮锛�https://dev.to/kpiteng/axios-vs-fetch-1eh5