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 请求

javascript 复制代码

// 基本 GET
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 带 URL 参数
axios.get('https://api.example.com/data', {
  params: {
    id: 123,
    page: 2
  }
});

// 使用 async/await
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

2. POST 请求

javascript 复制代码

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

3. 其他请求方法

javascript 复制代码

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

4.Axios 配置

全局默认配置

javascript 复制代码

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

2. 单个请求配置

javascript 复制代码

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

5.处理响应

响应数据结构

javascript 复制代码

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

2. 提取数据

javascript 复制代码

axios.get('/data')
  .then(response => {
    const data = response.data;
    const status = response.status;
  });

6.错误处理

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

javascript 复制代码

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

2. 全局错误拦截

javascript 复制代码

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 404) {
      alert('资源不存在！');
    }
    return Promise.reject(error);
  }
);

7.高级功能

1. 并发请求

javascript 复制代码

const request1 = axios.get('/data1');
const request2 = axios.get('/data2');

axios.all([request1, request2])
  .then(axios.spread((res1, res2) => {
    console.log(res1.data, res2.data);
  }));

2. 取消请求

javascript 复制代码

const controller = new AbortController();

axios.get('/data', {
  signal: controller.signal
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  }
});

// 取消请求
controller.abort('用户取消操作');

3. 自定义实例

javascript 复制代码

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

api.get('/users'); // 使用自定义实例

8.文件上传

javascript 复制代码

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(`上传进度: ${percent}%`);
  }
});