我想添加一个加载器组件,以便在 React 中进行 API 调用时呈现。我想使用 react 上下文 + 钩子(Hook)而不是 redux .
正如 react 钩子(Hook)的规则所说,我们不应该在 react 组件之外使用 react 钩子(Hook)。但我需要发送 SHOW_LOADER
和 HIDE_LOADER
在 Axios 拦截器内部,如下所示。
有没有办法做到这一点?
import axios from "axios";
axios.interceptors.request.use(
config => {
dispatch({
type: "SHOW_LOADER"
})
return config;
},
error => {
dispatch({
type: "HIDE_LOADER"
})
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
dispatch({
type: "HIDE_LOADER"
})
return response;
},
error => {
dispatch({
type: "HIDE_LOADER"
})
return Promise.reject(error);
}
);
function GlobalLoader(){
const [state,dispatch] = useContext(LoaderContext);
return(
<div>
{
state.loadStatus &&
<Loader
type = "Puff"
color = "#00BFFF"
height = {100}
width = {100}
timeout = {3000} />
}
</div>
);
}
export default GlobalLoader;
如果需要更多信息,请告诉我。:)
最佳答案
使用 axios.create(config)
创建 axios 实例.在 useEffect()
中使用此实例添加可以影响状态的拦截器(reducer 在这里是多余的)。现在到处使用实例,拦截器会引起状态的变化。
注:由于多个请求可以开始/和或结束,您应该使用计数器。请求增加,响应减少。如果计数器不是 0
,应用程序正在加载。
const { useState, useMemo, useEffect } = React;
const ax = axios.create(); // export this and use it in all your components
const useAxiosLoader = () => {
const [counter, setCounter] = useState(0);
const interceptors = useMemo(() => {
const inc = () => setCounter(counter => counter + 1);
const dec = () => setCounter(counter => counter - 1);
return ({
request: config => (inc(), config),
response: response => (dec(), response),
error: error => (dec(), Promise.reject(error)),
});
}, []); // create the interceptors
useEffect(() => {
// add request interceptors
const reqInterceptor = ax.interceptors.request.use(interceptors.request, interceptors.error);
// add response interceptors
const resInterceptor = ax.interceptors.response.use(interceptors.response, interceptors.error);
return () => {
// remove all intercepts when done
ax.interceptors.request.eject(reqInterceptor);
ax.interceptors.response.eject(resInterceptor);
};
}, [interceptors]);
return [counter > 0];
};
const GlobalLoader = () => {
const [loading] = useAxiosLoader();
return(
<div>
{
loading ? 'loading' : 'not loading'
}
</div>
);
}
const callApi = (err) => ax.get(err ? 'https://asdf' : 'https://www.boredapi.com/api/activity')
// make a request by using the axios instance
setTimeout(() => {
callApi();
callApi(true);
callApi();
}, 1000);
ReactDOM.render(
<GlobalLoader />,
root
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
关于reactjs - react 钩子(Hook) : Display global spinner using axios interceptor?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59335963/