如何延迟javascript函数的执行直到JSON加载

Question

我有一个链接两个 API 调用的页面，在执行 createPage 函数之前将数据加载到 first_data 和 second_data（这是几 kb 的数据操作和 d3.js）：

模板.html

<script src="createPage.js"></script>
<script>
var first_data, second_data = [], [];

function getFirstData(){
    return new Promise(function(resolve) {
        var xhr = new XMLHttpRequest();
        var url = "/API/my-request?format=json"
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                first_data = JSON.parse(xhr.responseText);
                resolve('1');
            }
        }
        xhr.open("GET", url, true);
        xhr.send();
    });
} //similar function for getSecondData()

getFirstData()
    .then(getSecondData)
    .then(createPage(first_data, second_data));
</script>

问题在于处理createPage 中数据的一些代码显示错误，例如“can't convert undefined to object”。在那个特定错误的情况下，这是因为我尝试对一些应该从 API 请求加载的数据执行Object.keys(data[0])。一些观察：

• 如果我在浏览器开发控制台中检查数据，它就在那里。
• 如果我只是将文件中的代码粘贴到控制台中，页面绘制得很好。
• 如果我为代码的数据操作部分硬编码初始化数组等（以摆脱 can't convert undefined，然后页面绘制，但所有图形都表明它们没有填充数据。
• 如果我将 JSON 数据放在 .js 文件中，并将其作为脚本加载到正文末尾的 createPage.js 文件之前，则页面加载正常。
• 我在createPage() 的开头和结尾插入了一个console.log("starting") 语句。查看我加载时的网络和 js 控制台输出，starting 输出发生在网络活动中显示两个 API GET 请求之前。这是否代表了真正发生的事情（即您可以混合使用 javascript 控制台和网络控制台计时吗？）

所以，显然我无法在需要时访问数据。

• 为什么？我的Promises 不正确吗？
• 我该如何解决这个问题？

Answer 1

Promise.prototype.then() 需要 2 个参数（onFulfilled & onRejected）作为 function-expression(OR handler or callback)，因为它是一个函数（处理程序），将在 Promise 实现时调用

在您的情况下，createPage(first_data, second_data) 将在解释器解释语句时调用函数createPage。

使用anonymous function 作为参数并在其中调用您的函数。

getFirstData()
  .then(getSecondData)
  .then(function() {
    createPage(first_data, second_data);
  });

编辑：如果你没有专门向回调传递任何参数，你可以使用.then(FUNCTION_NAME)

Answer 2

在函数式编程和使用 Promise 时，您可能应该将 getFirstData（和 getSecondData）重构为以下形式：

function getFirstData(){
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        var url = "/API/my-request?format=json"
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Resolve the result, don't assign it elsewhere
                resolve(JSON.parse(xhr.responseText));
            } else {
                // Add rejection state, don't keep the promise waiting
                reject("XHR Error, status = ", xhr.status); 
            }
        }
        xhr.open("GET", url, true);
        xhr.send();
    });
}

然后像这样解决承诺（假设第一个和第二个数据不相互依赖）

Promise.all([getFirstData(), getSecondData()]).then(function(allData){
  var first_data = allData[0];
  var second_data= allData[1];
  return createPage(first_data, second_data);
}).catch(function(error){
  console.log("Error caught: ", error);
});

为了让事情更整洁，您可以更改 createPages 的 from：

function createPage(first_data, second_data){
  // Function body
}

到

function createPage(data){
  var first_data = data[0];
  var second_data= data[1];
  // Function body
}

还有 Promise 部分：

Promise.all([getFirstData(), getSecondData()]).then(createPage);

注意它变短了吗？