Javascript ES6 Получить JSON из URL (без jQuery)

Question

Javascript ES6 Получить JSON из URL (без jQuery)

1

Мне было интересно, есть ли какой-либо способ ES6 для получения json или других данных из URL-адреса.

jQuery GET и Ajax звонки очень распространены, но я не хочу использовать jQuery в этом.

Типичный вызов будет выглядеть так:

var root = 'http://jsonplaceholder.typicode.com';

$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  console.log(data);
});

или без jQuery что-то вроде этого:

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Мой вопрос: есть ли какие-либо новые способы сделать это... например, ES6 или это все равно так же?

dj2017 08 июнь 2017, в 14:26

Источник

Теги:

javascript

ecmascript-6

es6-promise

3 ответа

2

То, что вы хотите, это API Fetch, но API-интерфейс Fetch не является частью ES6 - просто используется Promise, стандартизованное в ES6.

Чтобы получить JSON из URL-адреса с API-интерфейсом Fetch:

window.fetch('/path/to.json')
    .then(function(response){
        return response.json();
    }).then(function(json){
        return doSomethingWith(json);
    });

Если вам нужно поддерживать браузеры, у которых нет API-интерфейса Fetch, Github имеет открытый источник полина.

Thomas Foster 08 июнь 2017, в 11:04

2

Да, есть новый API Fetch. Используя это, вы можете принять его столько же, сколько сделать:

fetch(url).then(r => r.json())
  .then(data => console.log(data))
  .catch(e => console.log("Booo"))

Тем не менее, он не поддерживается всеми браузерами, но не все одинаково позитивны в реализации Fetch API.

Во всяком случае, вы можете создать свое собственное мнение по этому поводу и прочитать здесь больше.

Remy Kabel 08 июнь 2017, в 09:57

Ещё вопросы

Dinesh undefined · Accepted Answer · 2017-06-08T09-41-00.000Z

API FETCH

Пример:

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    // Error :(
});

Для дополнительной информации:

https://developer.mozilla.org/en/docs/Web/API/Fetch_API