react axios 实现超时退出登录

在React项目中使用axios进行HTTP请求时，可以通过设置axios的请求配置来实现超时机制，并在此基础上添加自动退出登录的逻辑。以下是实现这一功能的基本步骤：

1. 在axios的请求配置中设置`timeout`属性，这表示请求等待服务器响应的最大时间（单位为毫秒）。如果超过这个时间，请求将被自动中断。

2. 使用axios的`interceptors`来拦截请求和响应。在请求拦截器中可以添加超时后需要执行的操作，比如显示一个超时提示或者重置一些状态。在响应拦截器中，可以处理服务器返回的状态码，如果返回特定的错误码（比如token过期的错误码），则执行退出登录的操作。

3. 当检测到超时时，可以通过更改应用状态或直接跳转到登录页面来实现用户退出登录。

以下是一个简单的代码示例：

import axios from 'axios';

// 设置全局的axios默认值
axios.defaults.timeout = 5000; // 请求超时时间为5秒

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 假设状态码401为token过期
      // 执行退出登录逻辑
      // 这里的逻辑需要根据实际项目情况进行调整
      console.log('登录过期，请重新登录');
      // 可以使用history.push()跳转到登录页面
      // history.push('/login');
    }
    return Promise.reject(error);
  }
);

// 发起请求
axios.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理超时或错误
  });