axios

1.简介：

Axios 是一个基于 Promise 的当代化 HTTP 客户端库，广泛用于欣赏器和 Node.js 环境中发送 HTTP 哀求。它的计划目的是简化前后端数据交互，提供更高效、更易用的 API。
2.Axios 的焦点作用

•         发送 HTTP 哀求
          支持全部常见哀求方法（GET、POST、PUT、DELETE 等），并主动处置惩罚哀求参数和相应数据。
  
•         拦截哀求和相应
          可以在哀求发送前或相应返回后添加同一的处置惩罚逻辑（比方添加认证 Token、同一处置惩罚错误）。
  
•         数据转换
          主动将哀求数据转换为 JSON 格式（或自界说格式），并将相应数据（如 JSON）主动转换为 JavaScript 对象。
  
•         取消哀求
          提供取消哀求的机制，制止不须要的网络哀求（比方用户频仍利用时取消旧哀求）。
  
•         客户端防御 XSRF
          支持跨站哀求伪造（XSRF）防护，主动在哀求头中添加安全根据。
  
•         上传/下载进度监控
          支持监听文件上传和下载的进度。
  

3.发送哀求

1. GET 哀求

2. // 基本 GET
3. axios.get('https://api.example.com/data')
4.   .then(response => console.log(response.data))
5.   .catch(error => console.error(error));
7. // 带 URL 参数
8. axios.get('https://api.example.com/data', {
9.   params: {
10.     id: 123,
11.     page: 2
12.   }
13. });
15. // 使用 async/await
16. async function fetchData() {
17.   try {
18.     const response = await axios.get('https://api.example.com/data');
19.     console.log(response.data);
20.   } catch (error) {
21.     console.error(error);
22.   }
23. }

复制代码

2. POST 哀求

2. axios.post('https://api.example.com/users', {
3.   name: 'John',
4.   age: 30
5. })
6. .then(response => console.log('创建成功:', response.data))
7. .catch(error => console.error('创建失败:', error));

复制代码

3. 其他哀求方法

2. axios.put('https://api.example.com/users/1', { name: 'Alice' });
3. axios.delete('https://api.example.com/users/1');
4. axios.patch('https://api.example.com/users/1', { age: 31 });

复制代码

4.Axios 设置

1. 全局默认设置

2. axios.defaults.baseURL = 'https://api.example.com';
3. axios.defaults.headers.common['Authorization'] = 'Bearer token';
4. axios.defaults.timeout = 5000; // 5秒超时

复制代码

2. 单个哀求设置

2. axios.get('/data', {
3.   params: { id: 123 }, // URL 参数
4.   headers: { 'X-Custom-Header': 'value' }, // 自定义请求头
5.   timeout: 3000, // 单独设置超时时间
6.   responseType: 'json' // 响应数据类型（默认json）
7. });

复制代码

5.处置惩罚相应

1. 相应数据布局

2. {
3.   data: {},      // 服务器返回的数据
4.   status: 200,   // HTTP 状态码
5.   statusText: 'OK',
6.   headers: {},    // 响应头
7.   config: {}      // 请求的配置信息
8. }

复制代码

2. 提取数据

2. axios.get('/data')
3.   .then(response => {
4.     const data = response.data;
5.     const status = response.status;
6.   });

复制代码

6.错误处置惩罚

1. 捕获 HTTP 错误状态码（4xx/5xx）

2. axios.get('/data')
3.   .catch(error => {
4.     if (error.response) {
5.       // 服务器返回了错误状态码
6.       console.log('状态码:', error.response.status);
7.       console.log('错误数据:', error.response.data);
8.     } else if (error.request) {
9.       // 请求已发送但无响应
10.       console.log('无响应:', error.request);
11.     } else {
12.       // 其他错误（如配置错误）
13.       console.log('错误信息:', error.message);
14.     }
15.   });

复制代码

2. 全局错误拦截

2. axios.interceptors.response.use(
3.   response => response,
4.   error => {
5.     if (error.response.status === 404) {
6.       alert('资源不存在！');
7.     }
8.     return Promise.reject(error);
9.   }
10. );

复制代码

7.高级功能

1. 并发哀求

2. const request1 = axios.get('/data1');
3. const request2 = axios.get('/data2');
5. axios.all([request1, request2])
6.   .then(axios.spread((res1, res2) => {
7.     console.log(res1.data, res2.data);
8.   }));

复制代码

2. 取消哀求

2. const controller = new AbortController();
4. axios.get('/data', {
5.   signal: controller.signal
6. }).catch(error => {
7.   if (axios.isCancel(error)) {
8.     console.log('请求被取消:', error.message);
9.   }
10. });
12. // 取消请求
13. controller.abort('用户取消操作');

复制代码

3. 自界说实例

2. const api = axios.create({
3.   baseURL: 'https://api.example.com',
4.   timeout: 5000
5. });
7. api.get('/users'); // 使用自定义实例

复制代码

8.文件上传

2. const formData = new FormData();
3. formData.append('file', fileInput.files[0]);
5. axios.post('/upload', formData, {
6.   headers: {
7.     'Content-Type': 'multipart/form-data'
8.   },
9.   onUploadProgress: progressEvent => {
10.     const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
11.     console.log(`上传进度: ${percent}%`);
12.   }
13. });

复制代码