面试题：你在 Vue 项目中如何发送请求？ajax、fetch、axios 之间有什么区别？

在 Vue 项目中，发送请求是常见的需求，通常用于与后端 API 进行数据交互。

常用的请求方式包括 Ajax、Fetch 和 Axios。

以下是它们的区别以及在 Vue 项目中的使用方式。

1. Ajax

定义：
Ajax（Asynchronous JavaScript and XML）是一种通过 JavaScript 发送异步请求的技术，通常基于 XMLHttpRequest 对象。
特点：
- 原生支持，无需额外库。
- 使用复杂，需要手动处理请求和响应。
缺点：
- 代码冗长，可读性差。
- 不支持 Promise，需要手动处理异步逻辑。

2. Fetch

定义：
Fetch 是现代浏览器提供的一种基于 Promise 的请求 API，用于替代传统的 XMLHttpRequest。
特点：
- 基于 Promise，支持链式调用。
- 语法简洁，易于使用。
- 默认不携带 Cookie，需要手动配置。
缺点：
- 错误处理不够直观（需要手动检查 response.ok）。
- 不支持请求超时设置。
- 需要手动处理 JSON 数据。

3. Axios

定义：
Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。
特点：
- 支持 Promise，语法简洁。
- 自动转换 JSON 数据。
- 支持请求和响应拦截器。
- 提供请求取消功能。
- 支持超时设置。
优点：
- 功能强大，易于扩展。
- 社区支持广泛，文档齐全。
缺点：
- 需要额外安装和引入。

三者的区别

特性	Ajax	Fetch	Axios
语法	复杂，基于 `XMLHttpRequest`	简洁，基于 Promise	简洁，基于 Promise
JSON 处理	手动处理	手动处理	自动转换
错误处理	手动处理	需要手动检查 `response.ok`	自动捕获错误
请求取消	不支持	不支持	支持
超时设置	不支持	不支持	支持
拦截器	不支持	不支持	支持
浏览器兼容性	所有浏览器	现代浏览器	所有浏览器
是否需要额外库	不需要	不需要	需要

在 Vue 项目中的使用

1. 使用 Axios（推荐）

Axios 是 Vue 项目中最常用的请求库，功能强大且易于集成。

安装 Axios：npm install axios

在 Vue 项目中使用：

import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    axios.get('https://api.example.com/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('Error:', error);
      });
  },
};

全局配置：
可以在 main.js 中全局配置 Axios。

import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';
Vue.prototype.$http = axios;

拦截器：
Axios 支持请求和响应拦截器，适合统一处理请求和错误。

axios.interceptors.request.use(config => {
  // 在发送请求之前做一些处理
  return config;
});

axios.interceptors.response.use(response => {
  // 对响应数据做一些处理
  return response;
}, error => {
  // 对响应错误做一些处理
  return Promise.reject(error);
});

2. 使用 Fetch

Fetch 是原生 API，适合简单的请求场景。

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;
      })
      .catch(error => {
        console.error('Error:', error);
      });
  },
};

3. 使用 Ajax

Ajax 适用于需要兼容老旧浏览器的场景，但代码较为冗长。

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/users', true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        this.users = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};