封装axios 包括取消请求

在上面的代码中，我们首先把 fetchData() 方法封装到一个单独的 js 文件中，并在其中设置了 cancelToken 参数。通过传入该参数，我们就可以在需要时手动取消请求。在本例中，我们将 cancel 函数保存在全局变量 window.cancelFetch 中，以便在外部调用。然后，在使用 API 方法的页面中，我们直接调用 fetchData() 方法并传入对应的参数。在响应拦截器

kilito_01

321人浏览 · 2023-05-12 17:10:04

kilito_01 · 2023-05-12 17:10:04 发布

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 10000,
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求前判断请求是否已经被取消，如果是则直接返回一个空的 Promise 对象
    if (cancel) {
      return new Promise(() => {});
    }

    // 添加取消请求的逻辑
    config.cancelToken = new CancelToken(function executor(c) {
      cancel = c;
    });

    // 根据具体情况添加其他请求头参数等操作...
    return config;
  },
  error => {
    console.error(error); 
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 处理正常响应结果
    if (response.status === 200) {
      return response.data;
    }
    return Promise.reject(response);
  },
  error => {
    // 处理响应错误
    const { response } = error;
    if (response.status !== 200) {
      console.error(`Request Error: ${response.data.message}`);
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

export default instance;

使用

import axios from 'axios';

const CancelToken = axios.CancelToken;

// 封装请求 API 的方法
export function fetchData(params) {
  return axios.get('/api/data', {
    params,
    cancelToken: new CancelToken(function executor(c) {
      // 保存 cancel 函数
      window.cancelFetch = c;
    }),
  });
}

// 在使用的页面中调用 API 方法
fetchData({
  page: 1,
  limit: 10,
}).then(response => {
  console.log(response);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.warn('Request Cancelled:', error.message);
  } else {
    console.error(error);
  }
});

// 取消请求
setTimeout(() => {
  window.cancelFetch('Operation Cancelled by User');
}, 500);

在上面的代码中，我们首先把 fetchData() 方法封装到一个单独的 js 文件中，并在其中设置了 cancelToken 参数。通过传入该参数，我们就可以在需要时手动取消请求。在本例中，我们将 cancel 函数保存在全局变量 window.cancelFetch 中，以便在外部调用。当然，这只是一种简单的实现方式，在实际应用中，可能需要更加严谨和灵活的设计。

然后，在使用 API 方法的页面中，我们直接调用 fetchData() 方法并传入对应的参数。在响应拦截器中，我们使用 axios.isCancel() 方法来判断是否是用户手动取消的请求，并在控制台输出相应信息。

最后，在需要取消请求时，我们可以直接调用 window.cancelFetch(‘Operation Cancelled by User’) 来触发 cancel 函数。