Question

我正在使用某些JavaScript从webpage获取数据的应用中使用API endpoint。

在Safari和FireFox中，我可以连续多次请求该页面，并且可以快速获取和显示数据。相反，在Chrome中，只有当开发工具处于打开状态或我的缓存清晰时才会提取和显示数据（尽管我没有在开发工具中禁用缓存）。

如果开发工具未打开或Chrome已缓存页面，则重新加载页面大约需要10秒钟才能生成请求并显示数据。

有谁知道可能导致此行为的原因是什么？ Full app source

Answer 1

有问题的API请求使用isomorphic-fetch来发出请求。我用旧的学校AJAX请求替换了isomorphic-fetch代码，现在请求按预期立即触发。

<强>之前：

import fetch from 'isomorphic-fetch';

export const fetchTreeData = () => {
  return function(dispatch) {
    return fetch(config.endpoint + 'tree')
      .then(response => response.json()
        .then(json => ({
          status: response.status,
          json
        })))
      .then(({ status, json }) => {
        if (status >= 400) dispatch(treeRequestFailed())
        else dispatch(receiveTreeData(json))
      }, err => { dispatch(treeRequestFailed(err)) })
  }
}

<强>后：

export const fetchTreeData = () => {
  return function(dispatch) {
    get(config.endpoint + 'tree',
      (data) => dispatch(receiveTreeData(JSON.parse(data))),
      (e) => console.log(e))
  }
}

const get = (url, success, err, progress) => {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = () => {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
      if (xmlhttp.status === 200) {
        if (success) success(xmlhttp.responseText);
      } else {
        if (err) err(xmlhttp);
      }
    };
  };
  xmlhttp.onprogress = (e) => {if (progress) progress(e)};
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
};

如果dev工具未打开，则Chrome请求会在Chrome中延迟

1 个答案: