API выборки JavaScript

Прежде чем перейти к моему следующему потрясающему проекту, который будет ..

СПОЙЛЕР: САЙК! Заставил тебя смотреть 😛 Здесь не допускаются спойлеры, приятель!

В следующем проекте мне действительно придется замарать руки с помощью JavaScript Fetch API, чтобы получить некоторые внешние данные. Просмотрев в общей сложности 1000 документов (возможно, я немного преувеличил) о том, как использовать этот волшебный инструмент, я решил провести пробный запуск, прежде чем переходить к реальному проекту.

Следующий код доставит нам несколько бесплатных изображений, которые мы можем использовать в нашем следующем проекте. Сайт, с которого мы будем извлекать, называется Unsplash. У них есть потрясающие, красивые фотографии, которые мы можем использовать бесплатно.

Хотя их можно использовать бесплатно, нам нужно будет создать для них учетную запись, чтобы они могли предоставить нам два ключа для доступа к их API. Не беспокойтесь, создание учетной записи бесплатно.

Они предоставляют документацию о том, как использовать их API с уже созданными библиотеками для получения данных, но я решил попытаться получить данные самостоятельно, не устанавливая другую библиотеку. Таким образом, я действительно могу запачкать руки API-интерфейсом выборки.

Чтобы получить доступ к ключам, которые вам понадобятся для использования их API, выполните следующие действия:

После создания учетной записи и входа в систему нажмите на 3 точки на панели навигации и перейдите к «API/Разработчики».
Нажмите «Ваши приложения»
Нажмите «Новое приложение».
Установите все флажки и примите их условия… Обязательно прочтите условия и правила и следуйте им! Штрафы у них ОГРОМНЫЕ! Поверьте мне. Мне пришлось подписаться на план платежей, чтобы погасить штраф….
После принятия дайте вашему приложению имя и описание и создайте приложение.
Там есть несколько интересных заметок, которые вы можете прочитать, но нужная нам информация находится в разделе «Ключи».
Для этого урока или чего бы то ни было ЭТОГО нам понадобится Ключ доступа, поэтому убедитесь, что вы скопировали этого плохого мальчика.

Теперь, когда у вас есть ключ, мы можем выполнить несколько простых строк кода, чтобы получить некоторые данные.

Поскольку мы будем получать некоторые изображения, вы можете захотеть получить их фактическое визуальное представление, поэтому для этого мы создадим HTML-файл. Создайте свою базу html и добавьте в нее следующее

index.html

<body>
  <div class="output"></div>
  <script src="script.js"></script>
<body>

Простые вещи, верно? Хорошо, давайте сейчас создадим наш JS-файл. Давайте сначала получим элемент div и определим некоторые переменные.

script.js

const output = document.querySelector(".output");
let pictures = "";
const ACCESS_KEY: ENTER_YOUR_ACCESS_KEY_HERE
const unsplashEndpoint = `https://api.unsplash.com/search/photos?client_id=${ACCESS_KEY}&query=`;

Немного информации о приведенном выше коде:

В переменной images мы будем хранить наши фотографии.
Введите ВАШ ключ доступа, который вы получили, когда создавали свое приложение на шагах выше. Также не забывайте никому не показывать этот ключ!
unsplashEndpoint — это место, откуда мы будем получать наши данные. Вы можете найти дополнительную информацию и различные точки доступа для использования здесь.

Теперь, когда мы объявили наши переменные, мы можем начать выборку данных из их API. Я собираюсь заняться поиском обезьян! Почему вы можете спросить, потому что они ПОТРЯСАЮЩИЕ!

Далее я добавлю следующую строку: (Вы можете искать что хотите, не обязательно быть обезьянами, но я осужу вас, если вы этого не сделаете. Справедливое предупреждение)

const response = fetch(unsplashEndPoint + "monkeys");

Если мы зарегистрируем в консоли нашу переменную response, мы увидим, что она содержит объект Promise. Fetch возвращает обещающий объект, который представляет возможное завершение (или сбой) асинхронной операции и его результирующее значение.

Другими словами, fetch — это асинхронныйвызов. Он не будет заставлять любой код под ним ждать, пока он не сможет выполнить свою задачу. Вместо этого он дает нам обещание, что он завершит задачу как можно скорее и продолжит работу. К счастью для нас, у нас не будет другого кода, кроме выборки, поэтому мы можем продолжать фокусироваться только на нем.

Как вы видели в консоли, объект обещания на самом деле не содержит искомой информации, по крайней мере пока. Следовательно, чтобы получить некоторые данные, с которыми мы можем работать, нам нужно добавить метод .then(), чтобы указать JavaScript, что делать ПОСЛЕ, когда он извлекает наши данные и выполняет выполняет свое обещание. Давайте добавим следующее после объявления ответа и запишем результаты в консоль:

response.then(res => {
  console.log(res);
});

Если мы посмотрим на нашу консоль, мы должны увидеть следующее: (заблокировал мой ключ доступа)

Мы больше не работаем с обещанием, но действительно работаем с фактическим ответом. Журнал показывает нам объект ответа, который был возвращен из API. Как вы можете видеть в свойстве «status», 200 говорит нам, что это было успешно, и он смог получить данные, которые мы запрашивали, но это все еще не те данные, которые мы ищем. Что дает?

Причина в том, что этот ответ просто отображает информацию о заголовке. Мне нравится думать о заголовке как о письме, которое вы отправляете другу (письмо?? почта?? Я знаю, я НАСТОЛЬКО стар). Конверт содержит всю информацию, необходимую для того, чтобы письмо достигло адресата. Когда ваш друг получит письмо, он узнает, кто его отправил, просто взглянув на конверт. Вот как я интерполирую этот объект ответа. Данные, которые мы ищем, находятся там, но нам просто нужно их выкопать.

Большинство API имеют формат JSON, и поэтому нам нужно преобразовать наш ответ в JSON. В классе ответа есть функция, которая может сделать это за нас, и, конечно же, нам просто нужно добавить .json(), чтобы проанализировать его! Простой не так ли? Итак, давайте продолжим и проанализируем наш ответ в JSON и запишем результаты в консоль.

response.then(res => {
  console.log(res.json());
});

Вы видели результат???? Еще один объект обещания??? Что дает??? Что ж, я вам скажу, что дает незнакомец, как упоминалось выше, до того, как мы добавили .json(), все, что у нас было, это информация о заголовках на данный момент. Вызывая для него функцию .json(), мы просим его проанализировать читаемый поток из ответа в JSON. Мы просим его выполнить для нас ДРУГОЕ задание, и каков их ответ? Их ответ: я обещаюкак только я получу ответ (объект ответа), я обещаюразобрать ответ в JSON. Вы видите, что здесь произошло сейчас? Он выполнил вашу первую задачу и дал вам некоторые результаты, но теперь вы просите его сделать что-то еще с вашими результатами. Вы должны стоять в очереди, как и все мы!

Куда мы отправимся отсюда? Что ж, решение простое. Как и в прошлый раз, нам нужно добавить к нему .then(), чтобы он знал, что делать после анализа содержимого. Мы добавим оператор return в res.json() в первый блок затем для передачи JSON. данные в следующий, затемблок кода. Давайте добавим новые фрагменты кода и запишем в консоль наши результаты.

response
  .then(res => {
    return res.json();
  })
  .then(data => {
    console.log(data)
  });

Мы получили наши данные! Ну вроде… нам нужно извлечь то, что мы хотим, но мы определенно близки! Глядя на объект данных, мы видим, что у нас есть массив объектов «результаты», который содержит нужные нам данные. Если вы щелкнете по первому объекту в массиве, вы увидите все данные, которые мы можем извлечь и использовать. Тот, который нас интересует, находится в свойстве «urls». Он содержит ссылку, по которой находится изображение, и предоставляет различные размеры, которые мы можем использовать. Я буду использовать размер «большой палец», но не стесняйтесь использовать любой, какой захотите.

Отображение изображений на странице должно быть довольно простым. Мы пройдемся по массиву объектов, сохраним URL-адрес в теге элемента img и объединим их в переменную images. Затем мы выведем переменную images в div.

response
  .then(res => {
    return res.json();
  })
  .then(data => {
    let imagesArray = data.results;
    
    imagesArray.forEach(image => {
      pictures += `<div><img src="${image.urls.thumb}"></div>`;
    });
    output.innerHTML = pictures;
  });

Успех!!! Мы сделали это! Мы получили данные из API Unsplash и извлекли нужные данные. Код работает, но чего-то не хватает. Будут моменты, когда наша выборка будет возвращать ошибку, например, код состояния «404 Not Found», и если это произойдет, наш код не имеет системы безопасности, чтобы поймать это. К счастью, добавить к этому особо нечего. Для CATCH любых ошибок, которые могут возникнуть, нам просто нужно добавить блок .catch() в конце. Достаточно просто правильно! Добавим.

response
  .then(res => {
    return res.json();
  })
  .then(data => {
    let imagesArray = data.results;
    
    imagesArray.forEach(image => {
      pictures += `<div><img src="${image.urls.thumb}"></div>`;
    });
    output.innerHTML = pictures;
  })
  .catch(err => {
    console.log(err)
  });

Мы можем добавить туда более сложный код, чтобы лучше обрабатывать ошибку, но на данный момент будет достаточно вывести его в консоль.

Прежде чем я покажу вам весь сценарий в одном сером фоновом контейнере, я хотел бы сказать, что если вы действительно используете unsplash в своем проекте, убедитесь, что вы указали их и их фотографов в своем проекте. Массив результатов действительно содержит информацию о фотографе. Добавление их имени под используемыми изображениями приветствуется. Хорошо, теперь, когда мой PSA закончился, давайте посмотрим, как все это выглядит вместе.

const output = document.querySelector(".output");
let pictures = "";
const ACCESS_KEY: ENTER_YOUR_ACCESS_KEY_HERE
const unsplashEndpoint = `https://api.unsplash.com/search/photos?client_id=${ACCESS_KEY}&query=`;
const response = fetch(unsplashEndPoint + "monkeys");
response
  .then(res => {
    return res.json();
  })
  .then(data => {
    let imagesArray = data.results;
    
    imagesArray.forEach(image => {
      pictures += `<div><img src="${image.urls.thumb}"></div>`;
    });
    output.innerHTML = pictures;
  })
  .catch(err => {
    console.log(err)
  });

Думаю, мы можем добавить эту главу в книгу! Учебное пособие по Fetch с JS завершено! На следующий проект…..

API выборки JavaScript

Вопросы по теме