具体分析Axios例子

以下是一个完整的 Axios 示例，涵盖了常见的使用场景：发送请求、请求拦截器、响应拦截器、错误处理以及取消请求的应用。 示例代码：

// 引入 Axios
const axios = require('axios');

// 创建 Axios 实例
const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',  // API 基础 URL
  timeout: 5000,  // 设置超时时间为 5 秒
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器：在请求发送之前处理
apiClient.interceptors.request.use(config => {
  // 添加一个 Authorization 头部，模拟 token 认证
  const token = 'Bearer abc123';  // 假设你已经获取到的 token
  config.headers['Authorization'] = token;

  // 你可以在这里进行其他操作，比如日志记录
  console.log('Request Sent:', config);
  
  return config;  // 请求继续
}, error => {
  // 请求发生错误时的处理
  console.error('Request Error:', error);
  return Promise.reject(error);
});

// 响应拦截器：在响应返回后进行处理
apiClient.interceptors.response.use(response => {
  // 统一处理响应数据，假设后端返回的数据格式是 { data: ... }
  console.log('Response Data:', response.data);
  return response.data;  // 直接返回核心数据
}, error => {
  // 处理请求错误
  if (error.response) {
    // 响应错误（服务器返回了状态码 4xx 或 5xx）
    console.error('Response Error:', error.response);
  } else if (error.request) {
    // 请求错误（请求已发送，但没有收到响应）
    console.error('No Response:', error.request);
  } else {
    // 其他错误
    console.error('Error:', error.message);
  }

  return Promise.reject(error);  // 抛出错误，进一步处理
});

// 取消请求的设置
const cancelTokenSource = axios.CancelToken.source();

// 发起 GET 请求，获取所有用户数据
const getUsers = async () => {
  try {
    const response = await apiClient.get('/users', {
      cancelToken: cancelTokenSource.token
    });
    console.log('Users:', response);
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request was canceled:', error.message);
    } else {
      console.error('Error fetching users:', error);
    }
  }
};

// 发起 POST 请求，创建新用户
const createUser = async () => {
  try {
    const newUser = {
      name: 'John Doe',
      email: 'john@example.com'
    };
    const response = await apiClient.post('/users', newUser);
    console.log('Created User:', response);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

// 调用请求函数
getUsers();
createUser();

// 取消请求
setTimeout(() => {
  cancelTokenSource.cancel('Operation canceled by user');
}, 2000);  // 在 2 秒后取消请求

代码解释：

1. 创建 Axios 实例

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

• baseURL：设置所有请求的基础 URL，可以避免在每次请求时都写完整的 URL 地址。
• timeout：设置请求的超时时间，超过 5 秒会自动中断请求。
• headers：配置请求头，Content-Type 设为 'application/json'。

2. 请求拦截器

apiClient.interceptors.request.use(config => {
  const token = 'Bearer abc123';  
  config.headers['Authorization'] = token;
  console.log('Request Sent:', config);
  return config;
}, error => {
  console.error('Request Error:', error);
  return Promise.reject(error);
});

• 请求拦截器会在请求发送前执行，这里添加了一个 Authorization 头部，模拟请求时携带的 Token。
• config：请求的配置对象，可以在这里修改请求的参数（如请求头、请求数据等）。

3. 响应拦截器

apiClient.interceptors.response.use(response => {
  console.log('Response Data:', response.data);
  return response.data;
}, error => {
  if (error.response) {
    console.error('Response Error:', error.response);
  } else if (error.request) {
    console.error('No Response:', error.request);
  } else {
    console.error('Error:', error.message);
  }
  return Promise.reject(error);
});

• 响应拦截器用于统一处理返回的数据。
• 这里提取并返回响应的核心数据 response.data，简化了每个请求的处理。
• 错误处理：如果请求响应失败，可以通过 error.response 获取服务器返回的错误信息，error.request 获取请求错误信息，error.message 获取其他类型的错误。

4. 取消请求

const cancelTokenSource = axios.CancelToken.source();

• 通过 CancelToken 来控制请求取消。CancelToken.source() 创建一个取消令牌，用于取消请求。

setTimeout(() => {
  cancelTokenSource.cancel('Operation canceled by user');
}, 2000);

• 在 2 秒后取消发出的请求，模拟用户操作或不需要该请求时的场景。

5. 发起请求

• GET 请求 获取用户数据：

const response = await apiClient.get('/users', {
  cancelToken: cancelTokenSource.token
});

• POST 请求 创建新用户：

const response = await apiClient.post('/users', newUser);

• apiClient.get() 和 apiClient.post() 是基于实例的方法，它们会自动使用先前配置的 baseURL 和 timeout，并在请求头中添加 Token。