React：监听设备（API端点）

Question

我的设备 (SMSMachine) 只有一个端点 API。 我的目标是侦听设备自动执行的所有异步设备通信以及带有发送 SMS 参数的 API 调用的响应。

我尝试使用此代码（片段），在其中传递用户/密码参数：

useEffect(() => {
    const fetchData = async () => {
        try{
            const response = await fetch(`goip_get_status.html`, {
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'Authorization': 'Basic ' + btoa(`${username}:${password}`)
                }})
                
            const json= await response.json();
                
            if (response.ok && response.status === 200) {
                console.log("Connection made ", response);
            } else if (response.status >= 400 && response.status < 500 && response.status !== 429) 
            {
                console.log("Client side error ", response);
            }
            console.log("response:",response);
            console.log("json:",json);

            const parsedData = JSON.parse(json.data);
            setData((data) => [...data, parsedData]);
                
        }
        catch (error) {
            console.log("error: ",error);
        }
    };
    fetchData();
}, [data]);

但我收到“访问受限”消息。

最后我认为这不是正确的做法。 大家有类似的问题吗

Answer 1

我找到了解决方案。

我看到设备在多次尝试登录失败后，会阻止该 IP 几分钟，因此设备响应“访问受限”。

为了解决我也提出的问题

        params: { 
        username: username,
        password: password,
    },

（使用正确的用户名和密码） 传递给 fetch 的参数如下：

     const response = await fetch(`goip_get_status.html`, {
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'Authorization': 'Basic ' + btoa(`${username}:${password}`)
            }
            params: { 
                username: username,
                password: password,
            },
            }