react离开页面 axios取消请求

当使用 axios 发送请求时，它会返回一个 cancel token，可以使用该 token 取消请求。在 React 中，我们可以使用 useEffect 钩子来在组件卸载时取消请求。具体实现如下：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();

    axios.get('http://example.com/api/data', {
      cancelToken: source.token
    })
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled');
        } else {
          setError(error);
        }
      });

    return () => {
      source.cancel('Component unmounted');
    };
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (data) {
    return <div>{data}</div>;
  } else {
    return <div>Loading...</div>;
  }
}

在上面的代码中，我们创建了一个 cancel token，并将其作为请求的参数传递给 axios。然后，在 useEffect 的返回函数中，我们调用了 cancel 方法来取消请求。如果请求已被取消，我们将会得到一个 axios 的 Cancel error。