时间戳

首页 > 解决方案 > 有没有更有效的方法从 .onload() 函数中提取 JSON 数据？

javascript - 有没有更有效的方法从 .onload() 函数中提取 JSON 数据？

问题描述

我正在使用 REST API 只是为了更深入地了解它。最近几天我一直在研究的是“如何从 .onLoad() JSON 响应中提取数据并将其分配给全局变量？” 巧合的是，我发现了有关什么是回调函数的文章。在我在 StackOverflow 上提问之前，我决定自己解决这个问题。事情就是这样。

我启动了从 Star Wars API 提供商获取数据的正常程序。然后我创建了一个函数，它将获取响应行星数据并将其分配给全局变量（如行星名称、气候和直径）。该变量将是 THREE.js 中 3Dobject 的数据提供者，它将指示行为。我不想尝试将整个 THREE.js 代码放入 .onload() 函数中，因为我认为这会在以后造成很多混乱。瞧！现在我在全局变量中拥有了我想要的所有数据，我可以开始专注于我的 webApp 的下一部分，但是......我所做的是解决这个问题的最有效方法吗？takeOut() 函数还是一种回调函数吗？即使我没有把它作为 .onload() 函数的参数？比如 request.onLoad(takeout) ？

        //instance of request obj
        var request = new XMLHttpRequest;

        //open connection and GET data
        request.open("GET", "https://swapi.co/api/planets/2/", true);

        //working with data respond
        request.onload = function(){
            data = JSON.parse(this.response);
            return takeOut(data.name, data.climate, data.diameter);
        }

        //send a request for data
        request.send();


        //function to take out data from JSON response
        var name;
        var climate;
        var diameter;
        function takeOut(x,y,z){
            name = x;
            climate = y;
            diameter = z;
            return name, climate, diameter;
        }

我想要将行星对象名称、气候和直径分配给全局变量的 JSON 响应，作为另一个函数的数据提供者。函数拉取所有数据并将其分配给一个 var，但它有效吗？有没有更快和更少“耗时”的方法？我可以使用 .onLoad() 中的 XMLHttpRequest 方法以某种方式做到这一点，而无需创建专门用于提取数据并将数据分配给变量的单独函数吗？

标签： javascriptjsonapi

解决方案

在您的代码中， takeOut 并不是真正的回调函数。回调函数是作为参数传递给另一个函数的函数，该函数在调用范围内具有闭包（因此可以访问调用范围中存在的变量）。

为了使其可重用并利用回调函数：

function retrieveData(cb){
 //instance of request obj
 var request = new XMLHttpRequest;

        //open connection and GET data
 request.open("GET", "https://swapi.co/api/planets/2/", true);

        //working with data respond
 request.onload = function(){
   data = JSON.parse(this.response);
   return cb(data);
 }

        //send a request for data
 request.send();
}

retrieveData(function(data){
  //access data.name; data.climate
})

推荐阅读