Axios拦截器中的React hooks
如您所知，React hooks 只能在 React 组件或自定义 hooks 中使用。
本文将介绍如何在 Axios 拦截器中使用 hooks。
首先，创建一个 React 项目。
yarn create react-app hooks-in-axios-interceptors
// or
npx create-react-app hooks-in-axios-interceptors
然后创建一个具有自定义配置的 Axios 实例。
import axios from 'axios';
const instance = axios.create({
baseURL: "https://example.com"
})
export default instance;
由于我们需要 React 组件来使用 hooks，让我们在这里编写一个组件。
import axios from 'axios';
let instance = axios.create({
baseURL: "https://example.com"
})
function AxiosInterceptor({children}) {
return children;
}
export default instance;
export {AxiosInterceptor}
在组件中添加拦截器会产生副作用，所以我们需要借助useEffecthook 来实现。
将拦截器添加到 Axios 实例中useEffect。
注意：您必须在useEffectreturn 语句中删除拦截器，因为每次执行useEffect都会向 Axios 实例添加一个新的拦截器。
import axios from 'axios';
import { useEffect } from 'react'
const instance = axios.create({
baseURL: "https://example.com"
})
const AxiosInterceptor = ({ children }) => {
useEffect(() => {
const resInterceptor = response => {
return response;
}
const errInterceptor = error => {
return Promise.reject(error);
}
const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);
return () => instance.interceptors.response.eject(interceptor);
}, [])
return children;
}
export default instance;
export { AxiosInterceptor }
现在，您可以导入所需的钩子并在拦截器处理程序中使用它们。
例如，如果您想将返回状态码为 401 的请求重定向到登录页面，您可以使用useNavigate钩子（来自 react-router-dom）或钩子useRouter（来自 next/router）。
import axios from 'axios';
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
const instance = axios.create({
baseURL: "https://example.com"
})
const AxiosInterceptor = ({ children }) => {
const navigate = useNavigate();
useEffect(() => {
const resInterceptor = response => {
return response;
}
const errInterceptor = error => {
if (error.response.status === 401) {
navigate('/login');
}
return Promise.reject(error);
}
const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);
return () => instance.interceptors.response.eject(interceptor);
}, [navigate])
return children;
}
export default instance;
export { AxiosInterceptor }
注意：由于我们不想破坏应用程序的 SPA 行为，因此我们不使用window.location重定向。
最后，我们使用 Axios 拦截器组件包裹该应用程序。
import { AxiosInterceptor } from './axios'
import ThemeProvider from './theme-context'
import AuthProvider from './auth-context'
function App() {
return (
<ThemeProvider>
<AuthProvider>
<AxiosInterceptor>
<div>
App
</div>
</AxiosInterceptor >
</AuthProvider>
</ThemeProvider>
);
}
export default App;
注意：如果要访问其他上下文数据，Axios 拦截器组件必须是上下文提供程序的子组件。
Codesandbox 示例
结论
这样，你就可以在 Axios 拦截器中轻松使用 React hooks 了。
文章来源：https://dev.to/arianhamdi/react-hooks-in-axios-interceptors-3e1h