Axios请求在react中处理http请求

Posted 2021-03-19

Axios请求在反应中

这里是我的自定义钩子，但我没有得到如何附加spinner，而等待响应我添加加载，并将其设置为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>)
            }
        </>
    )
}