Axios 请求触发时机详解

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。以下是 Axios 请求会被触发的各种场景和时机：

一、基础触发场景

1. 直接调用请求方法

// GET 请求
axios.get('/user?ID=12345')
  .then(response => console.log(response))
  .catch(error => console.error(error));

// POST 请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })
  .then(response => console.log(response));

2. 使用 axios(config) 格式

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

二、组件生命周期中的触发时机（React/Vue 示例）

1. 组件挂载时（常用）

// React 示例
useEffect(() => {
  axios.get('/api/data')
    .then(response => setData(response.data));
}, []);

// Vue 示例
mounted() {
  axios.get('/api/data')
    .then(response => this.data = response.data);
}

2. 依赖项变化时

// 当 userId 变化时重新获取数据
useEffect(() => {
  axios.get(`/api/user/${userId}`)
    .then(response => setUser(response.data));
}, [userId]); // 依赖项

3. 事件处理函数中

const handleSubmit = (formData) => {
  axios.post('/api/submit', formData)
    .then(response => showSuccess(response.data))
    .catch(error => showError(error));
};

三、特殊触发场景

1. 拦截器中的自动触发

// 请求拦截器
axios.interceptors.request.use(config => {
  // 可以在这里修改配置或直接返回响应
  if (shouldUseCache(config)) {
    return Promise.resolve(cachedResponse); // 直接返回，不发送实际请求
  }
  return config;
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 预处理响应数据
  return response;
}, error => {
  // 错误处理
  return Promise.reject(error);
});

2. 取消请求场景

const source = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  }
});

// 取消请求（触发取消）
source.cancel('Operation canceled by the user.');

3. 并发请求

// 同时触发多个请求
axios.all([
  axios.get('/user/12345'),
  axios.get('/posts?userId=12345')
]).then(axios.spread((userResp, postsResp) => {
  // 两个请求都完成时触发
  console.log(userResp.data, postsResp.data);
}));

四、实际应用中的典型触发场景

1. 页面初始化加载数据 - 组件挂载时

2. 表单提交 - 提交按钮点击事件

3. 搜索/筛选 - 输入变化或筛选条件改变

4. 分页加载 - 页码或每页条数变化

5. 无限滚动 - 滚动到页面底部

6. 定时刷新 - setInterval 定时触发

7. WebSocket 后备 - 当 WebSocket 不可用时

8. 错误重试 - 请求失败后自动重试

五、最佳实践建议

1. 封装 Axios 实例

   const api = axios.create({
     baseURL: 'https://api.example.com',
     timeout: 5000
   });
   
   // 然后使用 api.get() 等替代 axios.get()

2. 合理控制请求频率

   // 使用防抖控制搜索请求
   const search = debounce(query => {
     axios.get(`/search?q=${query}`)
       .then(response => updateResults(response.data));
   }, 300);

3. 请求取消

   // React 组件中避免内存泄漏
   useEffect(() => {
     const source = axios.CancelToken.source();
     
     axios.get('/data', { cancelToken: source.token })
       .then(response => setData(response.data));
       
     return () => source.cancel('Component unmounted');
   }, []);

4. 错误统一处理

   // 全局错误处理
   api.interceptors.response.use(
     response => response,
     error => {
       if (error.response?.status === 401) {
         // 跳转到登录页
       }
       return Promise.reject(error);
     }
   );

理解这些触发场景可以帮助您更合理地设计应用程序的数据获取策略，避免不必要的请求，并优化用户体验。