Axios 在 React Native 中给出网络错误

Question

我正在使用 Expo Client 进行开发，但无法发送登录 API 调用。

onSubmit 函数

const onSubmit = async (username, password)=>{
    console.log(username);
    console.log(password);
    await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username: username,
            password: password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }        
    ).then(res=>{
        console.log(res.data);
        if (res.data.status==="success"){
            localStorage.setItem('username',res.data.username);
            localStorage.setItem('token',res.data.token);
            navigation.navigate('Settings');
        }else{
            setError(res.data.error);
        }
    }).catch(err=>console.log(err));
}

我得到的错误

总结

97127516

网络错误在 node_modules\axios\lib\core\createError.js:17:22 在 createError 在 node_modules\axios\lib\adapters\xhr.js:120:6 在 handleError 在 node_modules\event-target-shim\dist\event-target-shim.js:818:20 在 EventTarget.prototype.dispatchEvent 在 node_modules\react-native\Libraries\Network\XMLHttpRequest.js:609:10 在 setReadyState 在 node_modules\react-native\Libraries\Network\XMLHttpRequest.js:396:6 在 __didCompleteResponse 在 EventEmitter#emit 中的 node_modules\react-native\Libraries\vendor\emitter_EventEmitter.js:135:10 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 在 __callFunction 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 在 __guard$argument_0 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 在 __guard 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 在 callFunctionReturnFlushedQueue

Answer 1

你好吗？

[编辑] 我已经测试了你的代码，没有语法错误，但我注意到服务器没有响应请求。用花药 baseUrl 测试时，效果很好。但是 'https://backend.unknownchats.com/accounts/login/'.. 我得到了和你一样的错误，网络错误..在失眠和邮递员中，得到了一个 SSL 错误。所以问题不是你的代码，而是服务器。

我的建议是在使用 Insomnia 或 Postman 之前测试你的 api 请求。

所以..首先是您在同一个异步函数中使用了“await”和“then”异步方法。

最好的方法是使用“await”..被 try catch 包围。

还有一个小技巧就是，当object key和valye传入的prop相同时，可以只使用prop名称，我在上面设置。

第二点是，axios 有自己的错误数据处理程序。您发送的这个错误是默认的 axios 错误..

所以，要查看错误数据，可以在catch中console.log "error.response.data".

try{
 const {data} =  await axios.post(
        'https://backend.unknownchats.com/accounts/login/',
        {
            username,
            password,
        },
        {
            headers: {
            'Content-Type': "application/json",
            'Accept': "application/json",
            }  
        }   
     );
   console.log(data);      
 }catch(e){
   console.log(e.response.data);
 }

如果您能找到响应错误，请告诉我。

干杯！ :D

Axios 在 React Native 中给出网络错误

Axios giving Network error in React Native

react-native

axios