概念

Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 HTTP 请求。它支持处理各种 HTTP 请求类型（如 GET、POST、PUT、DELETE、PATCH 等），以及发送表单数据、JSON 数据、二进制数据和 URL 编码数据等。

特点：

简单易用：Axios 提供了简单且易于使用的 API，使得发送 HTTP 请求非常容易。
轻量级：Axios 很小，仅仅只有几十 KB 的大小。
支持 Promise API：Axios 使用 Promise API 处理 HTTP 请求和响应，这使得我们可以轻松处理异步操作，并在需要时对数据进行处理。
支持拦截器：Axios 允许我们在请求或响应被发送或接收之前，通过拦截器来对它们进行处理。这些拦截器可以用于修改请求或响应的数据、添加身份验证信息、捕获错误等。
支持取消请求：Axios 允许我们取消尚未完成的请求，这是处理多个并发请求时非常有用的功能。
支持浏览器和 Node.js：Axios 可以在浏览器和 Node.js 环境中使用，这使得它成为一种跨平台的数据请求工具。

使用

Axios 很简单，我们只需要在项目中安装 Axios，并在代码中使用它。例如，在发送 GET 请求时，我们可以这样使用 Axios：

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

在上面的示例中，我们使用 Axios 发送了一个 GET 请求，该请求将请求发送到 /user 端点，并将查询字符串参数 ID 设置为 12345。Axios 的 get 方法返回一个 Promise，我们可以使用 .then 处理响应数据或使用 .catch 处理错误。

总之，Axios 是一个简单易用、轻量级、支持 Promise API 和拦截器、支持取消请求、支持浏览器和 Node.js 的 HTTP 客户端，是处理数据请求的好选择。

常用的功能和配置选项：

1.发送请求时可以设置请求头、请求参数、请求体等配置

例如：

 axios.post('/user', {
   firstName: 'John',
   lastName: 'Doe'
 }, {
   headers: {
     'Content-Type': 'application/json'
   },
   params: {
     ID: 12345
   }
 })

在上面的示例中，我们使用 Axios 发送一个 POST 请求，请求体中包含名为 firstName 和 lastName 的属性。我们还设置了请求头中的 Content-Type 为 application/json，以及 URL 查询参数 ID 为 12345。

2.响应数据会被封装在一个包含响应状态码、响应头和响应体的对象中。

我们可以通过访问响应对象的 data 属性来获取响应体的数据。

 axios.get('/user/12345')
   .then(function (response) {
     console.log(response.status);
     console.log(response.headers);
     console.log(response.data);
   })
   .catch(function (error) {
     console.log(error);
   });

在上面的示例中，我们发送了一个 GET 请求，并在响应处理函数中打印了响应状态码、响应头和响应体。

3.Axios 提供了全局配置，例如设置默认的请求头、超时时间、响应类型等。

这些配置可以通过 axios.defaults 对象来设置。

 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 axios.defaults.timeout = 5000;
 axios.defaults.responseType = 'json';

在上面的示例中，我们设置了默认的请求头中的 Authorization 属性为一个授权令牌，超时时间为 5000 毫秒，响应类型为 json。

4.Axios 还支持通过自定义适配器来处理不同的请求方式。

例如发送一个 XMLHttpRequest 请求或在 Node.js 环境中使用 Node.js 内置的 http 模块发送请求。

 const adapter = process.browser ? require('axios/lib/adapters/xhr') : require('axios/lib/adapters/http');
 
 axios({
   url: '/user',
   method: 'post',
   adapter: adapter
 });

在上面的示例中，我们根据当前的环境选择不同的适配器，并使用它来发送请求。

5.可以使用拦截器对请求和响应进行预处理和后处理。

拦截器允许我们在请求被发送或响应被处理之前对它们进行修改。例如，在请求中添加公共的请求头，或在响应中对错误进行统一处理。

 javascriptCopy code
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么
   config.headers['Authorization'] = getToken();
   return config;
 }, function (error) {
   // 对请求错误做些什么
   return Promise.reject(error);
 });
 
 // 添加响应拦截器
 axios.interceptors.response.use(function (response) {
   // 对响应数据做点什么
   return response;
 }, function (error) {
   // 对响应错误做点什么
   if (error.response && error.response.status === 401) {
     clearToken();
     router.push('/login');
   }
   return Promise.reject(error);
 });

在上面的示例中，我们使用 axios.interceptors 对象添加了请求和响应拦截器。请求拦截器在发送请求之前添加了一个名为 Authorization 的请求头，并且在响应拦截器中检查了响应状态码，如果状态码为 401，则清除授权令牌并跳转到登录页面。

6.支持取消请求，可以通过取消标识符来取消请求。

例如，在一个输入框中搜索时，如果用户连续输入多个字符，就需要取消上一次的搜索请求。

 javascriptCopy code
 const CancelToken = axios.CancelToken;
 let cancel;
 
 axios.get('/search', {
   cancelToken: new CancelToken(function executor(c) {
     // executor 函数接收一个 cancel 函数作为参数
     cancel = c;
   })
 });
 
 // 取消请求
 cancel();

在上面的示例中，我们通过传递一个 cancelToken 参数来创建一个取消标识符，然后使用 cancel 函数来取消请求。

7.支持批量请求，可以同时发送多个请求，并在所有请求完成后一起处理响应数据。

 javascriptCopy code
 axios.all([
   axios.get('/user/12345'),
   axios.get('/user/67890')
 ])
 .then(axios.spread(function (response1, response2) {
   // 两个请求现在都执行完成
   console.log(response1.data);
   console.log(response2.data);
 }));

在上面的示例中，我们使用 axios.all 方法同时发送两个 GET 请求，然后使用 axios.spread 方法将响应数据分别传递给两个回调函数进行处理。

以上是一些 Axios 常用的功能和配置选项，还有很多其他的特性和用法，可以参考官方文档来了解。

如何在vue中设置axios

在 Vue 项目中使用 Axios 需要先安装 Axios，可以通过以下命令进行安装：

 npm install axios --save

然后在需要使用 Axios 的组件中引入它：

 import axios from 'axios';

接下来，我们可以在组件中使用 axios 对象发送请求：

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

上面的示例中，我们使用 axios.get 方法发送一个 GET 请求，并在响应成功后打印响应数据。如果请求失败，则打印错误信息。

通常情况下，我们会将 Axios 封装成一个单独的模块，在项目中统一处理请求和响应。例如，我们可以在 src 目录下创建一个名为 api.js 的文件，并在其中封装 Axios：

 import axios from 'axios';
 
 const service = axios.create({
   baseURL: process.env.VUE_APP_API_URL,
   timeout: 5000
 });
 
 service.interceptors.request.use(
   config => {
     // 在请求发送之前做一些处理，例如添加请求头等
     return config;
   },
   error => {
     // 对请求错误做一些处理
     console.log(error);
     return Promise.reject(error);
   }
 );
 
 service.interceptors.response.use(
   response => {
     // 对响应数据做一些处理，例如提取出数据部分等
     return response.data;
   },
   error => {
     // 对响应错误做一些处理
     console.log(error);
     return Promise.reject(error);
   }
 );
 
 export default service;

在上面的示例中，我们创建了一个 Axios 实例 service，并对其进行了一些配置，例如设置了请求的基本 URL 和超时时间等。然后，我们使用 service.interceptors 添加了请求和响应拦截器，并最终将 service 对象导出供其他组件使用。

在组件中使用封装好的 Axios 时，只需要导入 api.js 并调用其中的方法即可：

 import api from '@/api';
 
 api.get('/user', { params: { ID: 12345 } })
   .then(data => {
     console.log(data);
   })
   .catch(error => {
     console.log(error);
   });

在上面的示例中，我们导入了封装好的 Axios 对象 api，并使用 api.get 方法发送一个 GET 请求，并在响应成功后打印响应数据。如果请求失败，则打印错误信息。

Axios介绍与使用

概念

特点：

使用