Axios请求在react中处理http请求

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];
};

然后显示一个微调器在你的组件,而 loadingtrue.

未经测试,可能无法使用,但你可能会得到这个想法。

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>)
            }
        </>
    )
}

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Matlab - 能够将一个结构的字段分解成几个较小的字段。

2022-4-21 14:09:15

解决方案

tfidf w2v给出NaN值。

2022-4-21 14:09:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索