Axios

Axios

Axios 介绍

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node. js 环境。它支持多种请求类型（如 GET、POST、PUT、DELETE 等），并且提供了丰富的功能，如请求和响应拦截、自动转换 JSON 数据、取消请求等。

主要特性

1. 支持 Promise API：Axios 基于 Promise，使得异步请求更加简洁和易于管理。
2. 拦截请求和响应：可以拦截请求和响应，进行统一处理，如添加请求头、处理响应数据等。
3. 转换请求数据和响应数据：可以对请求数据和响应数据进行转换，如进行加密或解密。
4. 取消请求：可以取消正在进行的请求，提高应用的灵活性。
5. 自动转换 JSON 数据：自动处理 JSON 数据的序列化和反序列化。
6. 客户端支持防御 XSRF：提供机制防止跨站请求伪造攻击。

安装

在浏览器中，可以通过 CDN 引入 Axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

在 Node. js 中，可以通过 npm 安装：

npm install axios

基本用法

GET 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 或者使用 params 对象
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

POST 请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (account, permissions) {
    console.log(account.data, permissions.data);
  }))
  .catch(error => {
    console.error('请求失败:', error);
  });

拦截器

请求拦截器

请求拦截器可以在请求发送前进行处理，例如添加请求头：

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers['Authorization'] = 'Bearer your_token';
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器

响应拦截器可以在响应返回后进行处理，例如统一处理错误：

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    console.log(error.request);
  } else {
    console.log('Error', error.message);
  }
  return Promise.reject(error);
});

错误处理

可以在请求中使用 catch 捕获错误，或者使用 validateStatus 配置选项自定义错误范围：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
  });
// 自定义错误范围
axios.get('/user/12345', {
  validateStatus: function (status) {
    // 当且仅当 status 大于等于 500 时 Promise 才被 reject
    return status < 500;
  }
});

总结

Axios 是一个强大且灵活的 HTTP 客户端，适用于各种网络请求场景。它支持多种请求方法、配置选项、拦截器、并发请求、文件上传等功能，同时还提供了良好的错误处理机制和 TypeScript 支持。通过合理使用 Axios，你可以简化前端与后端之间的通信，提升开发效率和代码质量。

Axios 和 AJAX 的区别

1. 定义和本质

• AJAX（Asynchronous JavaScript and XML）：
  • 定义：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现网页的异步更新。
  • 本质：AJAX 是一种技术概念，主要通过 XMLHttpRequest 对象（或 fetch API）实现。它是一种浏览器提供的原生 API，用于发送 HTTP 请求和接收响应。
  • 示例：

    // 使用 XMLHttpRequest 发送 GET 请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
    xhr.send();

• Axios：
  • 定义：Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node. js 环境。它是一个第三方库，封装了底层的 HTTP 请求逻辑，提供了更简洁和强大的 API。
  • 本质：Axios 是一个库，基于 XMLHttpRequest 和 fetch API 实现，提供了更高级的接口和功能，如请求和响应拦截、自动转换 JSON 数据、取消请求等。
  • 示例：

    // 使用 Axios 发送 GET 请求
    axios.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });

2. 功能和特性

• AJAX：
  • 功能：主要功能是发送 HTTP 请求和接收响应。支持 GET、POST、PUT、DELETE 等请求方法。
  • 特性：
    • 原生支持：是浏览器提供的原生 API，无需额外库。
    • 复杂性：使用 XMLHttpRequest 时，代码较为繁琐，需要处理多种状态和事件。
    • 错误处理：需要手动处理各种状态码和错误情况。
    • 异步处理：需要使用回调函数处理异步操作，代码可读性较差。
• Axios：
  • 功能：除了发送 HTTP 请求和接收响应，还提供了请求和响应拦截、自动转换 JSON 数据、取消请求、并发请求等功能。
  • 特性：
    • Promise 支持：基于 Promise，使得异步请求更加简洁和易于管理。
    • 拦截器：可以拦截请求和响应，进行统一处理，如添加请求头、处理响应数据等。
    • 自动转换 JSON：自动处理 JSON 数据的序列化和反序列化。
    • 取消请求：可以取消正在进行的请求，提高应用的灵活性。
    • 错误处理：提供了统一的错误处理机制，可以捕获和处理各种请求错误。
    • 并发请求：支持并发请求，可以同时发送多个请求并处理响应。

3. 使用场景

• AJAX：
  • 简单请求：适用于简单的 HTTP 请求，如获取数据、提交表单等。
  • 轻量级：不需要引入额外的库，适合对性能要求极高的场景。
• Axios：
  • 复杂应用：适用于需要处理多种请求类型、进行数据转换、统一错误处理和请求拦截的复杂应用。
  • 大型项目：在大型项目中，Axios 的功能和特性可以显著提高开发效率和代码质量。

4. 性能和兼容性

• AJAX：
  • 性能：作为原生 API，性能较好，但代码复杂度较高。
  • 兼容性：广泛支持所有现代浏览器，但在一些旧版本浏览器中可能需要额外处理。
• Axios：
  • 性能：基于 XMLHttpRequest 和 fetch API 实现，性能与原生 AJAX 相当，但代码更加简洁。
  • 兼容性：支持所有现代浏览器，但在一些旧版本浏览器中可能需要引入 Promise 和 fetch 的 polyfill。

总结

• AJAX 是一种技术概念，主要通过 XMLHttpRequest 对象实现，适用于简单的 HTTP 请求。
• Axios 是一个基于 Promise 的 HTTP 客户端库，提供了更高级的接口和功能，适用于复杂的应用和大型项目。
  选择使用 AJAX 还是 Axios 取决于具体的应用需求和项目复杂度。对于简单的请求，AJAX 足够使用；对于复杂的应用，Axios 提供了更多的功能和更好的开发体验。

jQuery.ajax 和 axios

axios 和 jQuery.ajax 都是用于发送 HTTP 请求的工具，但它们在设计理念、功能特性、使用方式以及性能等方面存在一些区别。以下是它们的详细对比：

1. 基本概念

• jQuery.ajax
  jQuery.ajax 是 jQuery 提供的一个强大的 AJAX 方法，用于发送 HTTP 请求。它依赖于 jQuery 库，是 jQuery 对原生 JavaScript XMLHttpRequest 的封装，简化了 AJAX 请求的编写。
• Axios
  Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是一个独立的库，不依赖于 jQuery 或其他框架，专门用于发送 HTTP 请求。

2. 功能特性

特性	jQuery.ajax	Axios
Promise 支持	不支持，需要手动处理回调	原生支持 Promise，代码更简洁
拦截器	不支持	支持请求拦截器和响应拦截器，方便全局处理请求和响应
错误处理	通过回调函数处理	通过 Promise 的 .catch 或 try...catch 处理，更符合现代 JavaScript 的习惯
并发请求	需要手动实现	提供 axios.all 和 axios.spread 方法，方便处理并发请求
取消请求	不支持	支持取消请求，可通过 CancelToken 或 AbortController 实现
默认配置	需要手动设置	支持全局配置和实例配置，方便统一管理请求参数
跨域支持	依赖浏览器实现	同样依赖浏览器实现，但更灵活（如支持自定义跨域请求头）
Node.js 支持	不支持	支持浏览器和 Node.js 环境

3. 使用方式

• jQuery.ajax 示例：

  $.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: function(response) {
      console.log("Success:", response);
    },
    error: function(error) {
      console.error("Error:", error);
    }
  });

• Axios 示例：

  axios.get("https://api.example.com/data")
    .then(response => {
      console.log("Success:", response.data);
    })
    .catch(error => {
      console.error("Error:", error);
    });

4. 性能

• 文件大小：
  • jQuery.ajax 依赖于 jQuery 库，jQuery 的体积较大（压缩后约 30KB 左右）。
  • Axios 的体积较小（压缩后约 5KB 左右），更适合现代轻量级应用。
• 性能优化：
  • Axios 是一个专为 HTTP 请求设计的库，性能优化更好，且不包含其他无关功能。
  • jQuery.ajax 是 jQuery 的一部分，功能更全面，但可能包含一些不必要的开销。

5. 社区和生态

• jQuery.ajax：
  jQuery 是一个历史悠久的库，社区庞大，文档丰富，但近年来使用率逐渐下降，尤其是在现代前端开发中。
• Axios：
  Axios 是一个较新的库，专注于 HTTP 请求，社区活跃，更新频繁，更适合现代前端开发（如 Vue.js、React 等）。

6. 适用场景

• jQuery.ajax：
  • 如果项目已经使用了 jQuery，且对 AJAX 功能要求不高，可以继续使用 jQuery.ajax。
  • 适用于简单的页面级应用或小型项目。
• Axios：
  • 推荐用于现代前端项目，尤其是需要 Promise 支持、拦截器、并发请求等功能的场景。
  • 适用于大型项目、单页应用（SPA）以及需要在浏览器和 Node.js 中复用 HTTP 请求代码的场景。

7. 总结

• jQuery.ajax：
  优点是简单易用，适合已经使用 jQuery 的项目。但随着现代前端开发的发展，其功能和性能逐渐显得不足。
• Axios：
  更现代、功能强大、体积小，支持 Promise 和拦截器等特性，适合现代前端开发，尤其是与 Vue.js、React 等框架结合使用。
  如果你正在开发一个现代的前端项目，推荐使用 Axios，它更适合当前的开发需求和技术趋势。