reactjs - axios cancelToken 中使用效果清理

Question

我想通过useEffect清理代码实现axios取消令牌，我可以在组件中调用axios时实现这种方式，但是我想知道当axios调用在单独的文件中时是否可以实现cancelToken。

[when using axios in the component] 
useEffect(() => {
const request = Axios.CancelToken.source() 

const fetchPost = async () => {
  try {
    const response = await Axios.get(`endpointURL`, {
      cancelToken: request.token, 
    })
    setPost(response.data)
    setIsLoading(false)
  } catch (err) {
    console.log('There was a problem or request was cancelled.')
  }
}
fetchPost()

return () => request.cancel() 
}, [])

[page component]
  useEffect(() => {
    const cancel = axios.CancelToken.source();
    fetchData();
    return () => {
};
  }, []);

  const fetchData= async () => {
    try {
      const payload = {
        page: 0,
        size: 10,
      };
      const {
        data: { content },
      } = await UserService.getUserSupplier(payload);
      setSupplier(content);
    } catch (err) {
      console.log(err);
    }
  };

[UserService.js]
export const getUserSupplier = async payload => {
  const url = `/user/supplier?${qs.stringify(payload)}`;
  const response = await ApiService.get(url); // ApiService is just Axios I separated file because of interceptor 
  return response;
};

标签： reactjsaxios