花费太多时间调用 promise 的 then 函数答案

【问题标题】：Taking too much time to call promise's then function花费太多时间调用 promise 的 then 函数
【发布时间】：2016-04-25 16:12:41
【问题描述】：

我正在使用 fetch API 在我的 React Native 应用程序中调用查询服务器。但是，我的应用程序在收到服务器的响应后需要 50 秒来调用 then 函数。我做错了什么还是 Promise 工作很慢？

fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: bodyContent
    }.then((responseText) =>  {
        console.log(responseText);
        responseText.json().then(function(response){
             console.log(response);
        });
    });

response 在responseText 之后 50 秒后在日志中打印

更新：刚刚发现responseText.json() 承诺只有在我再次点击屏幕后才会执行。这个问题很奇怪。

【问题讨论】：

您在查看请求后发现问题出在哪里？
我看到了控制台日志。它首先记录 responseText 并在 50 分钟后记录响应。
那么请求需要这么长时间，网络面板会向您显示一些详细信息，但您可能需要查看服务器端日志以了解问题所在。如果问题出在响应回调中，那么返回的响应有多大，需要永远解析？
你指的控制台日志是上面代码中的console.log(responseText)吗？那么cuplrit不是json函数吗？
服务器立即返回数据。 responseText 来自服务器。 json 函数需要 50 秒才能从 responseText 中提取 response

标签： javascript react-native fetch-api

【解决方案1】：

最后，我找到了解决这个问题的方法。这是因为Chrome Debugging。如果我停止 chrome 调试，它工作正常。如果 Chrome 调试器正在运行，我必须点击屏幕以获取返回值。因此，如果您正在运行 chrome 调试器，请忽略此延迟。

【讨论】：

【解决方案2】：

由于我们将其范围缩小到需要太多时间的 json() 调用，这似乎是一个已报告的问题 (https://github.com/facebook/react-native/issues/6418)，它不经常发生并且到目前为止无法重现。它可能与您的 json 对象的结构或大小有关。

就我个人而言，我在我的 React Native 应用程序中使用了你大量使用的代码结构，并且没有性能损失。但是，我的典型响应非常小且简单（例如，包含大约 20 个键的 10 个对象的列表，没有嵌套等）

您可以尝试我链接到的问题报告中的建议并使用 responseText.text() 并比较性能。

【讨论】：

【解决方案3】：

promise 比回调慢一点。但不是50秒！我认为您的互联网连接有问题。

【讨论】：

没有。如果问题出在互联网连接上，那么打印 responseText 本身需要更多时间。这个承诺只是从 responseText 中提取响应。
那么问题是 responseText.then() 可能是从数据库或服务器的其他表达式导出的数据太长。您可以衡量您的代码在后端运行了多长时间。
如果你使用 react native 可能会有问题。也许是 .then(.then()) 的问题

【解决方案4】：

我也遇到过同样的问题，responseText 会在几毫秒内立即返回，但是当它使用 .json() 转换为 json 时，需要几秒钟，有趣的是如果我在 .json 期间单击屏幕() 解析期间，它立即将 json 数据取回

【讨论】：

我也面临同样的问题。
我找到了解决方案。检查我的答案。这是因为 Chrome 调试。 :)
是的，我现在没有遇到这个问题。 :)

【解决方案5】：

尝试从您的浏览器（通常是 F12 键）打开您的 webtool kit 开发人员并进入网络选项卡。

您可以看到查询所用的时间。如果需要很长时间，则可能是您的网络连接或服务器设置了延迟响应。

如果不是，那就是客户端。

【讨论】：

我正在构建 React Native 应用程序。不是普通的网络应用程序。所以，我在网络标签中看不到这些东西。