axios 如何封装中断请求

项目方案：axios 请求中断封装方案

一、背景介绍

在前端开发中，经常会遇到需要发送请求的情况，而有时候我们希望能够中断请求。axios 是一个常用的异步请求库，本文将介绍如何封装 axios 来实现请求中断的功能。

二、方案介绍

1. 封装 axios

// axios.js
import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

const request = axios.create({
  baseURL: '
});

request.interceptors.request.use(
  config => {
    config.cancelToken = new CancelToken(function executor(c) {
      cancel = c;
    });
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

export { request, cancel };

2. 使用中断请求

// app.js
import { request, cancel } from './axios';

// 发送请求
const fetchData = async () => {
  try {
    const response = await request.get('/posts');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
};

// 中断请求
const cancelRequest = () => {
  if (cancel) {
    cancel('Request cancelled');
  }
};

// 调用函数
fetchData();

// 中断请求
cancelRequest();

三、关系图

erDiagram
  CUSTOMER ||--o| ORDER : places
  ORDER ||--| PRODUCT : contains

四、类图

classDiagram
  class Request {
    + request()
    - cancel()
  }
  
  class App {
    + fetchData()
    + cancelRequest()
  }
  
  Request <|-- App

五、总结

通过以上的方案，我们已经实现了对 axios 请求的中断功能的封装。在实际项目中，可以根据具体需求做进一步封装和优化，以提高代码的可维护性和可复用性。希望本文对大家有所帮助。