ReactJS - получить данные объекта json по URL-адресу

Question

Как получить данные из URL-адреса в ReactJS.

URL-адрес имеет следующий тип: http://www.domain.com/api/json/x/a/search.php?s=category

, который, если набранный в браузере, будет отображать объект JSON.

Как загрузить его в ReactJS.

Для начала, я начал:

const dUrl = "http://www.the...."; 

console.log(dUrl); 

но, очевидно, он отображает URL не содержание (что, я буду иметь возможность фильтровать - это только этот начальный этап загрузки его в объект, Я не знаю)

Редактировать: Я бы предпочел не использовать jQuery.

Answer 1

Для этого вам необходимо использовать AJAX. Это легко с помощью jQuery.

const dUrl = "http://www.domain.com"; 

$.ajax(
    { 
    url: dUrl, 
    success: function(result){ 
     console.log(result); 
    } 
    } 
); 

Вам нужно будет добавить/импортировать jQuery, чтобы заставить его работать.

Если вы не хотите, чтобы добавить Ajax затем:

function loadData(url) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     console.log(xhttp.responseText); 
    } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
} 

см this для получения дополнительной информации о AJAX

Answer 2

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

Ну у вас будет использовать Ajax. Проверьте связь выше. Попробуйте сделать вызов во время одного из методов жизненного цикла компонента. Это не использует JQuery.

Answer 3

Попробуйте использовать API-интерфейс Fetch, рекомендованный Facebook. Вам следует избегать смешивания в jQuery с ReactJS и придерживаться метода ReactJS для управления DOM.

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    return responseJson.movies; 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

Или с помощью асинхр/ждут

async function getMoviesFromApi() { 
    try { 
    let response = await fetch('https://facebook.github.io/react-native/movies.json'); 
    let responseJson = await response.json(); 
    return responseJson.movies; 
    } catch(error) { 
    console.error(error); 
    } 
} 

https://facebook.github.io/react-native/docs/network.html

Я знаю, URL-адрес для React документации туземца, но это относится к ReactJS, а также.