Блог

Я играю с REST API просто для того, чтобы глубже понять это. В последние несколько дней я исследовал вопрос «Как извлечь данные из ответа .onLoad() JSON и присвоить их глобальным переменным?». По случайному совпадению я нашел статью о том, что такое функции обратного вызова. Я решил решить эту проблему самостоятельно, прежде чем буду задавать вопросы в StackOverflow. Вот в чем дело.

Я инициировал обычную процедуру получения данных от поставщика API Star Wars. Затем я создал функцию, которая будет принимать данные планеты в ответ и присваивать их глобальным переменным (например, название планеты, климат и диаметр). Эти переменные будут поставщиком данных для 3Dobject в THREE.js и это будет определять поведение. Я не хотел пытаться помещать целые THREE.js введите код в функцию .onload (), потому что я думаю, что это создало бы много беспорядка позже. Вуаля! Однако теперь у меня есть все данные, которые я хотел, в глобальных переменных, и я могу начать фокусироваться на следующей части моего веб-приложения… То, что я сделал, является наиболее эффективным способом решения этой проблемы? Является ли функция takeOut () по-прежнему функцией обратного вызова? Даже когда я не указывал это в качестве параметра функции .onload()? Например, request.onLoad (вынос)?

         //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 с именем объекта планеты, климатом и диаметром был присвоен глобальным переменным в качестве поставщика данных для другой функции. Функция извлекла и присвоила все данные переменной, но эффективно ли это? Есть ли более быстрый и менее «трудоемкий» метод для этого? Могу ли я как-то это сделать с помощью метода XMLHttpRequest внутри .onLoad() без создания отдельной функции специально для извлечения и присвоения данных переменным?

В вашем коде вынос на самом деле не является функцией обратного вызова. Функция обратного вызова — это функция, которая передается в качестве аргумента другой функции, которая имеет закрытие в области вызова (и, следовательно, доступ к переменным, которые существуют в области вызова).

Чтобы сделать его многоразовым и использовать функцию обратного вызова:

 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
})