Пример использования github API из javascript

Ответ 1

Если вы хотите использовать ванильный JavaScript (т.е. без фреймворка), вам нужно поиграть с объектом XMLHttpRequest. XMLHttpRequest обеспечивает ядро ​​для реализации AJAX.

Несмотря на префикс XMLHttp, вы не ограничены XML или HTTP. Вы можете получить любой тип данных (например, JSON) и использовать другие протоколы, такие как FTP.

Скажем, мы хотели бы GET получить вашу информацию от пользователя GitHub. Из браузера мы можем легко сделать запрос, посетив https://api.github.com/users/funchal. Отправка HTTP-запроса в JavaScript так же просто с XMLHttpRequest:

// Create a new request object
var request = new XMLHttpRequest();

// Initialize a request
request.open('get', 'https://api.github.com/users/funchal')
// Send it
request.send()

Если вы дадите это перейти с консоли JavaScript, вы можете почувствовать себя немного разочарованным: ничего не произойдет немедленно. Вам придется подождать, пока сервер ответит на ваш запрос. С момента создания экземпляра объекта запроса до момента ответа сервера объект будет претерпевать ряд изменений состояния, обозначенных значением свойства readyState:

• 0 UNSENT: open() невостребованный
• 1 OPENED: send() невостребованный
• 2 HEADERS_RECIEVED: заголовки и статус доступны после send()
• 3 LOADING: responseText все еще загружает
• 4 DONE: Wahoo!

Как только все будет закончено, вы можете проверить атрибут response для данных:

request.readyState // => 4 (We've waited enough)
request.response // => "{whatever}"

При использовании XMLHttpRequest#open() у вас есть несколько вариантов для рассмотрения. Здесь подпись метода:

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

Третий параметр, который по умолчанию равен true, определяет, должен ли ответ быть выполнен асинхронно. Если вы установите для этого параметра значение false, вам придется подождать, пока ответ будет завершен для #send(), чтобы вернуться, и вы заплатите цену за блокировку всей вашей программы. Таким образом, мы кодируем асинхронный код, чтобы наша программа оставалась отзывчивой, даже когда мы ждем. Эта асинхронность достигается с помощью прослушивателей событий (обработчиков событий a.k.a.) и функций обратного вызова.

Предположим, мы хотим просто сбросить ответ на консоль после ее поступления. Сначала нам нужно создать функцию обратного вызова, которую мы хотели бы выполнить onload:

function dumpResponse() {
  // `this` will refer to the `XMLHTTPRequest` object that executes this function
  console.log(this.responseText);
}

Затем мы устанавливаем этот обратный вызов как слушатель/обработчик для события onload, определенного интерфейсом XMLHttpRequest:

var request = new XMLHttpRequest();
// Set the event handler
request.onload = dumpResponse;
// Initialize the request
request.open('get', 'https://api.github.com/users/funchal', true)
// Fire away!
request.send()

Теперь, когда вы будете получать данные в виде строки, вам нужно проанализировать строку с помощью JSON.parse(), чтобы сделать что-либо значимое. Скажем, я хочу отлаживать количество публичных репозиториев, которые у вас есть вместе с вашим именем. Я могу использовать эту функцию для синтаксического анализа строки в JSON, а затем я могу вытащить нужные атрибуты:

function printRepoCount() {
  var responseObj = JSON.parse(this.responseText);
  console.log(responseObj.name + " has " + responseObj.public_repos + " public repositories!");
}
var request = new XMLHttpRequest();
request.onload = printRepoCount;
request.open('get', 'https://api.github.com/users/funchal', true)
request.send()
// => Giovanni Funchal has 8 public repositories!

Подробнее о XMLHttpRequest см. спецификацию W3C и Сеть разработчиков Mozilla.