gpt4 book ai didi

javascript - 在 react 中使用 axios 拦截器的问题

转载 作者:行者123 更新时间:2023-12-04 15:00:47 25 4
gpt4 key购买 nike

我想在使用 axios 发出和发送请求时获得获取状态。我认为我可以通过使用 axios 拦截器 来实现这一点。我试试这段代码:

./axiosInstance.js

let fetching = false;

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
fetching = true;
console.log("first log: ", fetching);
return config;
}, () => { fetching = false });

axiosInstance.interceptors.response.use(() => {
console.log("second log: ", fetching);
fetching = false;
console.log("third log: ", fetching);
});

export { fetching, axiosInstance };

这就是我使用自己创建的 axios 实例发出和发送请求的方式:

./component.js

import { fetching, axiosInstance } from "./axiosInstance";

const Component = () => {

const sendRequest = () => {
axiosInstance.get("someUrl:somePort/");
};

return (
<>
<button type="button" onClick={ sendRequest }>click</button>
<p>{ fetching ? "true": "false" }</p>
</>
);
}

export default Component;

但问题是,这是行不通的。我按预期在 ./axiosInstance.js 中获取日志:

first log: true
second log: true
third log: false

但我在 ./component.js 中有一个

标记,我用它来显示 fetching 变量的值我从 ./axiosInstance.js 获取它。并且它的值永远不会更改为 true,它始终为 false。

<p>{ fetching ? "true": "false" }</p>

最佳答案

import {useState} from 'react';

const [fetching, setFetching] = useState(false);

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
setFetching(true);
console.log("first log: ", fetching);
return config;
}, () => { fetching = false });

axiosInstance.interceptors.response.use(() => {
console.log("second log: ", fetching);
setFetching(false);
console.log("third log: ", fetching);
});

export { fetching, axiosInstance };

您可以使用fetching 作为状态。它会起作用。

关于javascript - 在 react 中使用 axios 拦截器的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66999220/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com