Axios 承诺处理 - 在 react-native 中获取“可能的未处理承诺拒绝 - 类型错误：网络请求失败”

Posted 2023-03-07

技术标签:

【中文标题】Axios 承诺处理 - 在 react-native 中获取“可能的未处理承诺拒绝 - 类型错误：网络请求失败”【英文标题】：Axios Promise Handling - Getting "Possible Unhandled Promise Rejection - TypeError: Network request failed" in react-native 【发布时间】：2018-02-09 23:54:26 【问题描述】：

在登录屏幕上的react-native 应用程序中，我正在努力在输入错误的用户名/密码组合后向用户提供很好的错误消息。为了与 API 交互，我使用了库 Axios。但是，当我在 catch 语句中收到错误时，我会收到一条丑陋的错误消息，说我有一个“未处理的承诺拒绝”，我无法执行诸如设置组件状态或导航到新页面之类的操作。

我看不出我做错了什么，它看起来与我在文档中看到的示例完全一样。

在我的表单提交功能中，我有：

axios.post('http://192.168.1.11:1337/login', 
  email: this.state.username,
  password: this.state.password
).then(function (response) 

  // This stuff all seems to work great
  console.log("The response we got: ", response);
  if (response.status == 200) 
    console.log("Status code equals 200");
    Actions.homepage();
  
).catch(function (err) 

  // Run into big problems when I get an error
  console.log("Got an error logging in, here's the message: ", err);
);

谁能看到我在这里做错了什么？

P.S.这是我从服务器返回的错误消息，它是从 console.log("Got an error logging in, here's the message: ", err); 记录的：

"Got an error logging in, here's the message:"

 [Error: Request failed with status code 401]
  config: 
    transformRequest:  '0': [Function: transformRequest] ,
     transformResponse:  '0': [Function: transformResponse] ,
     headers: 
       Accept: 'application/json, text/plain, */*',
       'Content-Type': 'application/json;charset=utf-8' ,
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    validateStatus: [Function: validateStatus],
    method: 'post',
    url: 'http://192.168.1.11:1337/login',
    data: '"email":"zach@homies.io","password":"dddddd"' ,
  response: 
     data:  message: 'Invalid password', user: false ,
     status: 401,
     statusText: undefined,
     headers: 
      map: 
         connection: [ 'keep-alive' ],
          date: [ 'Thu, 31 Aug 2017 23:30:21 GMT' ],
          'x-powered-by': [ 'Sails <sailsjs.org>' ],
          vary: [ 'X-HTTP-Method-Override' ],
          'content-length': [ '52' ],
          'access-control-allow-credentials': [ '' ],
          'access-control-allow-origin': [ '' ],
          etag: [ 'W/"34-Ymi4isRxuJ6jE1EIS+AQag"' ],
          'access-control-allow-methods': [ '' ],
           'access-control-allow-headers': [ '' ],
           'access-control-expose-headers': [ '' ],
           'content-type': [ 'application/json; charset=utf-8' ]  ,
     config: 
        transformRequest:  '0': [Function: transformRequest] ,
        transformResponse:  '0': [Function: transformResponse] ,
        headers: 
          Accept: 'application/json, text/plain, */*',
           'Content-Type': 'application/json;charset=utf-8' ,
        timeout: 0,
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN',
        maxContentLength: -1,
         validateStatus: [Function: validateStatus],
          method: 'post',
          url: 'http://192.168.1.11:1337/login',
          data: '"email":"zach@homies.io","password":"dddddd"' ,
       request: 
         url: 'http://192.168.1.11:1337/login',
          credentials: 'omit',
          headers: 
            map: 
               accept: [ 'application/json, text/plain, */*' ],
                'content-type': [ 'application/json;charset=utf-8' ]  ,
          method: 'POST',
          mode: null,
          referrer: null,
          _bodyInit: '"email":"zach@homies.io","password":"dddddd"',
          _bodyText: '"email":"zach@homies.io","password":"dddddd"',
          bodyUsed: true

这是它在 android 模拟器（模拟三星 Galaxy S7）上的截图：

【问题讨论】：

可能只是 err 或 err.response 未定义，因此尝试记录 err.response.data 会引发错误，因此，尽管您使用的是 .catch - 因为它会引发错误，你手上有一个未处理的拒绝我已经记录了 err.response.data - 我什至将它包含在 SO 问题中。它从服务器正确返回错误。 @JaromandaX 在代码中你清楚地声明了Run into big problems when I get an error - 你从不说console.log('...', err.response.data) 输出什么 - 你显示你从服务器得到的错误消息，但那不可能是err.response.data - 看起来就像它不仅仅是err.response.data 您能否扩展黄色警告并将其包含在您的问题中？这叫什么？它是一个 React 类吗？您是否尝试过从 catch 中返回错误？通常当你看到这样的问题时，会有一个上游函数期望从 Promise 中接收一些东西。 【参考方案1】：

这个sn-p没有错。

您发送请求。您收到 401 - 未经授权的响应。 Catch 收到错误并记录它。

有趣的部分是为什么您会收到未处理的承诺拒绝错误。但这被扔到了别的地方。所以你需要提供更多的代码。

编辑：也许您只需要将您的 axios 承诺返回给调用函数？

【讨论】：

酷。今晚我将提供更多代码/信息。希望我能找出问题的真正根源。否则我会在 +150 代表比赛的最后一天接受这个作为答案。谢谢当然我很乐意得到代表，但我没有解决你的问题；o)【参考方案2】：

我有同样的问题，我使用 Firebase 作为数据库

我解决了这个问题