Axios 在 React Native 中出现网络错误答案

【问题标题】：Axios giving Network error in React NativeAxios 在 React Native 中出现网络错误
【发布时间】：2022-09-30 19:55:35
【问题描述】：

我正在使用 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 in handleError 在 EventTarget.prototype.dispatchEvent 中的 node_modules\\event-target-shim\\dist\\event-target-shim.js:818:20 在 setReadyState 中的 node_modules\\react-native\\Libraries\\Network\\XMLHttpRequest.js:609:10 在 __didCompleteResponse 中的 node_modules\\react-native\\Libraries\\Network\\XMLHttpRequest.js:396:6 在 node_modules\\react-native\\Libraries\\vendor\\emitter_EventEmitter.js:135:10 在 EventEmitter#emit 在 __callFunction 中的 node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:414:4 在 node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:113:6 in __guard$argument_0 在 __guard 中的 node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:365:10 在 node_modules\\react-native\\Libraries\\BatchedBridge\\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

标签： react-native axios

【解决方案1】：

你好吗？

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

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

所以..第一件事是你在同一个异步函数中使用“await”和“then”异步方法。

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

另一个提示是，当对象键与 valye 中传递的道具相同时，您只能使用道具名称，我将在上面设置。

第二点是，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

【讨论】：

我尝试使用上面的代码意味着使用 try 和 catch 并且我也在使用 Axios 的错误我也尝试不使用 async 和 await 但它仍然无法正常工作。
我已经测试了您的代码，没有 sintax 错误，但我注意到服务器没有响应请求。用花药baseUrl测试时，效果很好。但是'backend.unknownchats.com/accounts/login'..我遇到了与您相同的错误，网络错误..在失眠和邮递员中，遇到了 SSL 错误。所以问题不是你的代码，而是服务器。
是的，你对 http 是正确的，它工作正常，但不是 https
很好，你能接受答案吗？你投赞成票？

【解决方案2】：

const config = {
  method: 'post',
  url: `${BASE_URL}/login`,
  headers: { 
    'Content-Type': 'multipart/form-data'.  <----- Add this line in your axios header
  },
  data : formData
};


  axios(config).then((res)=> console.log(res))

【讨论】：