axios相比原生ajax的优点有哪些呢？

Axios 比原生 AJAX 在前端开发中有很多优势：

• 更简洁易用的 API: Axios 提供了更简洁、更易于使用的 API，使得发送 HTTP 请求更加方便。例如，设置请求头、处理响应数据等操作都更加直观。原生 AJAX 需要手动处理 XMLHttpRequest 对象的各种状态和事件，比较繁琐。

• Promise 支持: Axios 基于 Promise，避免了回调地狱，使代码更易于阅读和维护。 Promise 提供了更优雅的方式来处理异步操作，包括 .then() 用于处理成功响应和 .catch() 用于处理错误。原生 AJAX 依赖回调函数，容易导致代码嵌套过深。

• 自动转换 JSON 数据: Axios 可以自动将响应数据转换为 JSON 格式，无需手动解析。原生 AJAX 需要手动使用 JSON.parse() 方法进行转换。

• 客户端支持防止 CSRF 攻击: Axios 可以自动设置 X-CSRF-Token 请求头，有助于防止跨站请求伪造 (CSRF) 攻击。原生 AJAX 需要手动设置请求头。

• 请求和响应拦截: Axios 提供了请求和响应拦截器，可以在请求发送前或响应接收后进行一些操作，例如添加身份验证令牌、修改请求数据或处理错误。原生 AJAX 需要手动处理这些逻辑。

• 取消请求: Axios 提供了取消请求的功能，可以方便地中断正在进行的 HTTP 请求。原生 AJAX 取消请求比较复杂。

• 错误处理: Axios 提供了更完善的错误处理机制，可以更方便地捕获和处理各种类型的错误。原生 AJAX 需要手动检查 XMLHttpRequest 对象的状态码和错误信息。

• TypeScript 支持: Axios 对 TypeScript 提供了良好的支持，方便在 TypeScript 项目中使用。

总结一下，使用 Axios 的主要好处是:

• 提高开发效率: 简洁的 API 和 Promise 支持可以显著减少代码量和开发时间。
• 增强代码可读性和可维护性: 避免回调地狱，使代码结构更清晰。
• 更强大的功能: 提供请求/响应拦截、取消请求、错误处理等高级功能。

虽然 Fetch API 也提供了类似的功能，但 Axios 仍然是一个流行的选择，因为它更加成熟，拥有更广泛的社区支持和更丰富的功能。

以下是一个简单的例子，对比 Axios 和原生 AJAX 如何发送 GET 请求：

Axios:

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

原生 AJAX:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.response));
  } else {
    console.error(xhr.statusText);
  }
};
xhr.onerror = () => {
  console.error('Network Error');
};
xhr.send();

可以看出，使用 Axios 发送请求的代码更加简洁易懂。