react 中的Axios请求
这是我的自定义挂钩，但在等待响应时，我不知道如何连接微调器我添加了加载并将其设置为true，我注意到解决了它
const useHttpReqHandler = () => {
const [result, setResult] = useState();
const [loading, setLoading] = useState(true);
const apiMethod = async ({url , data , method}) => {
let options = {
method,
url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data
};
let response = await axios(options);
const UpdatedData = await response.data;
console.log(UpdatedData)
setResult(UpdatedData);
setLoading(false)
}
return [result , apiMethod];
};
我把这个自定义挂钩称为另一个组件
但是在等待响应的时间内，我如何添加Sppiner
const useHttpReqHandler = () => {
const [result, setResult] = useState();
const [loading, setLoading] = useState(false);
const apiMethod = useCallback(async ({url , data , method}) => {
let options = {
method,
url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data
};
setLoading(true);
try {
let response = await axios(options);
const UpdatedData = await response.data;
setResult(UpdatedData);
setLoading(false);
} catch (e) {
console.error(e)
setLoading(false);
}
}, [setLoading, setResult])
return [loading, result , apiMethod];
};
然后在组件中显示一个微调器，而loading是true。
未经测试，可能不起作用，但你可能会想到：
const MyComponent = () => {
const [loading, apiResult, apiMethod] = useHttpReqHandler();
const captchValidation = useCallback(() => {
const x = result.toString();
const y = inputValue.toString();
apiMethod({url: 'your url', data: {"email": email}, method: 'post'})
if (x === y) {
console.log("Entered here in api part")
if(apiResult){
alert("success")
}
}
else {
alert("fail")
}
}, [apiMethod, apiResult])
return (
<>
{
loading ? (<Spinner />) : (<button onClick={captchValidation}></button>)
}
</>
)
}