Vue中数据请求的选择：Axios or Fetch？-猿码集

1. 简介

Vue.js是一款轻量级前端JavaScript框架，提供易于使用的数据绑定和组件化系统。在Vue.js开发过程中，经常需要进行异步数据请求，获取到数据之后再进行组件渲染和展示。Axios和Fetch都是Vue.js中常用的数据请求库，本文将比较两种库的特点和使用方法，以便开发者根据实际需要进行选择。

2. Axios介绍

2.1 什么是Axios？

Axios是一个基于Promise的HTTP客户端，可以用在浏览器和node.js中。它具有以下特点：

支持浏览器和node.js

支持Promise API

拦截请求和响应

转换请求和响应数据

自动转换JSON数据

客户端端防止CSRF攻击

2.2 Axios使用示例


axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

以上是Axios中最常用的GET请求，还有POST、PUT、DELETE等请求方式。Axios能够自动将JavaScript对象转换成JSON格式，也可以从服务器自动解析JSON数据。

3. Fetch介绍

3.1 什么是Fetch？

Fetch是一种替代XMLHttpRequest的API，可以用于进行HTTP请求，支持Promise API。Fetch支持的特性包括：

支持浏览器和node.js

支持Promise API

可以拦截请求和响应

自动解析JSON数据

跨站点访问控制

3.2 Fetch使用示例


fetch('/user?id=12345')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

以上是Fetch中最常用的GET请求示例。Fetch API是基于Promise设计的，一般调用方式是先fetch()生成一个Promise对象，然后根据Promise状态执行回调函数。

4. Axios vs Fetch

4.1 Promise使用

Axios和Fetch都是基于Promise API的，但是Axios的使用比Fetch更简单。Axios的then()回调中直接返回response对象，而Fetch需要在then()回调中再执行response.json()方法解析JSON数据。


// Axios示例
axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// Fetch示例
fetch('/user?id=12345')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

4.2 自动转换数据格式

在获取JSON格式数据时，Axios和Fetch都支持自动解析JSON数据。但是当需要发送JSON格式数据到服务器时，Axios比Fetch更好用。Axios可以直接将JavaScript对象转换为JSON格式发送，而Fetch需要手动设置请求头ContentType，再将JavaScript对象通过JSON.stringify()方法转换成JSON字符串。


// Axios示例
axios.post('/user', {
    name: 'Bob',
    age: 25
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// Fetch示例
fetch('/user', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: 'Bob', age: 25})
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

4.3 拦截请求和响应

Axios支持拦截请求和响应，可以在发送请求或者接收响应前对数据进行一些处理。Fetch支持拦截请求和响应头，但是无法拦截请求体和响应体。


// Axios拦截器示例
axios.interceptors.request.use(function (config) {
  console.log('请求拦截器', config);
  return config;
}, function (error) {
  console.log('请求出错', error);
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
  console.log('响应拦截器', response);
  return response;
}, function (error) {
  console.log('响应出错', error);
  return Promise.reject(error);
});
// Fetch拦截器示例
window.fetch = (function(originalFetch) {
  return function(...args) {
    console.log('请求拦截器', ...args);
    return originalFetch.apply(this, args)
      .then(resp => {
        console.log('响应拦截器', resp);
        return resp;
      });
  };
})(window.fetch);

4.4 兼容性

在浏览器端，Fetch只支持IE10及以上版本，而Axios支持所有主流浏览器和IE8+。在node.js环境下，Axios和Fetch都可以使用。

5. 结论

综合比较，Axios和Fetch都是优秀的数据请求库，各有特点。如果需要进行请求和响应拦截、自动转换数据格式、支持旧版浏览器等高级功能，可以选择Axios；如果需求较简单、只是发送GET请求或获取JSON格式数据，建议使用Fetch。

5.1 怎么选择？

在实际开发中，根据项目需求进行选择。

如果你需要对请求和响应进行拦截和处理，使用Axios。

如果你不需要拦截，只是简单发送请求和获取JSON数据，使用Fetch。

如果要求兼容性较强，建议使用Axios。

如果只考虑性能，两者差别不大，根据个人习惯选择即可。

6. 参考文献

Axios说明文档

Fetch API

Axios VS Fetch

Vue中数据请求的选择：Axios or Fetch？