React Native Fetch：第二个承诺挂起

Posted 2023-02-21

【中文标题】React Native Fetch：第二个承诺挂起

【英文标题】：React Native Fetch: second promise hanging

【发布时间】：2016-07-15 19:19:24

【问题描述】：

React Native 的 fetch 出现了奇怪的问题。 它以前工作过，不知道我改变了什么，但它停止工作了。

login(data,success,fail)
    console.log('doing fb login');
    fetch(host+'/api/login?credentials='+data.credentials)
        .then( (response) => 
            console.log('got login response');
            return response.json();
         )
        .then( json => 
            console.log('got login json');
            if(json.result!='fail')
                success(json);
             else 
                fail(json);
            
            return json;
        )
        .catch((error) => 
          console.warn(error);
        );

问题是我看到第一条“得到登录响应”消息，但它只是挂起，直到我按下触发“得到登录 json”并按预期继续的屏幕之前什么都没有发生。

这令人沮丧，因为这种情况一直在发生，我不明白为什么第二个 .then() 没有自动触发。

非常感谢任何帮助。

编辑：发现了一个类似的问题：What could be causing this slow fetch in react native?

似乎已经在查看：https://github.com/facebook/react-native/issues/6679

此外，只有在启用 Chrome 调试工具时才能看到该行为...有趣

【问题讨论】：

同样的事情发生在我身上，当我通过 Chrome 开发工具禁用调试时停止发生。非常感谢你提到那部分，救了我。

What could be causing this slow fetch in react native?的可能重复

【参考方案1】：

response.json() is a promise，不是一个值。所以它不会为你解决。 我还会根据 response.status 而不是 json.result 检查结果，因为在某些情况下，服务器的响应无法转换为 json（例如 401）。

.then( (response) => 
   if (response.status >= 200 && response.status < 300) 
      response.json().then((data) => success(data));
    else 
      fail(response);
   
)

【讨论】：

从then 函数返回一个承诺应该在链接到下一个then 函数之前解决承诺，所以你不应该嵌套then 这样的调用：@987654326 @ 是一种非常合适的处理方式。

【参考方案2】：

console.log 是一个阻塞语句。停止代码的同步响应，直到它已解决，但使用Chrome调试，当标签不在前景中时可能会慢。