Эти данные выглядят так привлекательно для вас: понимание JS Fetch API

В JavaScript fetch() — это API, который позволяет вам делать сетевые запросы для получения данных с сервера. Он возвращает обещание, которое разрешается с помощью объекта ответа. Чтобы получить доступ к данным, вам нужно вызвать метод ответа, такой как text() или json(), который вернет другое обещание с данными в качестве его разрешенного значения. fetch() также можно использовать для выполнения других типов запросов, таких как POST, путем передачи объекта Request в качестве второго аргумента с желаемыми заголовками и телом. Он поддерживается во всех современных браузерах и считается более современным методом, чем XMLHttpRequest.

fetch() — это не единственный способ, которым JS может работать с данными с серверов, но он может быть самым распространенным. Давным-давно основным методом был XMLHttpRequest, однако этот метод уже устарел. Есть модули, которые можно установить для отправки запросов (например, Axios), но выборка уже доступна во всех браузерах из коробки. Любой начинающий разработчик должен потратить некоторое время, чтобы ознакомиться с этим встроенным API.

fetch() использует промисы, так что прочитайте это, если не знаете, что это такое

Большая картина

Я немного перефразирую здесь, но javascript.info хорошо раскрывает основы fetch():

1. fetch() делает сетевой запрос к URL-адресу и возвращает обещание.

2. Это обещание разрешается с помощью объекта ответа, когда удаленный сервер отвечает заголовками.

3. Чтобы прочитать тело ответа, мы должны вызвать для него метод ответа, например text() или json(), который вернет другое обещание, значением разрешения которого является тело ответа.

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then((response) => response.json())
  .then((myJson) => {
    console.log('Here is the json!', myJson);
  });

Для получения более подробной технической информации я рекомендую вам перейти по ссылке javascript.info. Кроме того, Google написал отличную статью, и неудивительно, что они углубляются в нее больше, чем мой старина.

Авария

fetch() создает обещание, которое разрешается с помощью объекта ответа. Теперь у этого объекта ответа есть тело, но это то, что называется читаемый объект потока. Наши данные находятся там, но единственный способ получить их — использовать метод ответа, который возвращает наши данные как другое разрешенное значение промиса. Поэтому нам нужен еще один then(), чтобы реально использовать наши данные. Вот базовая версия псевдокода того, что происходит:

fetch('https://some-url.com')
  .then((theResponseObject) => {
    return theResponseObject.methodToGetToData()
  })
  .then((myUsableData) => {
    // manipulate/show/log our data 
  })
  .catch((error) => {
    // error handling here
  });

Если какой-либо из этих шагов будет отклонен, вы просто catch() его.

Работа с примером

Итак, теперь давайте поговорим на примере. Для этого мы будем использовать великолепный сайт JSONplaceholder, который предоставляет фиктивные файлы JSON, соответствующие соглашениям REST. Идеально для тестирования и учебных пособий. Ниже давайте поместим пользователя на нашу страницу:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then((response) => {
    console.log(`status: ${response.status}`);
    console.dir(response.body);
    return response.json() // the important line 
  })
  .then((myJson) => {
    document.write(
      `User: ${myJson.name} <br/>
      Email: ${myJson.email} <br />
      Website: ${myJson.website}`
    );
    return myJson;
  })
  .then(console.log)

Наш fetch() разрешается с помощью объекта ответа, который берется в наш первый метод then(). Я зарегистрировал некоторые основные свойства, но я призываю вас также покопаться в них самостоятельно. Наш первый then() возвращает response.json(), который представляет собой разрешенное обещание, содержащее наши данные. В данном случае это JSON, но если бы это был просто текст, мы могли бы вместо этого использовать метод ответа text().

Во втором then() мы действительно можем манипулировать нашими данными. Я просто использую document.write() для этого урока, но теперь, когда у вас есть доступ к данным, вы можете поместить их на свою страницу, как хотите. Второй then() просто возвращает наши данные, чтобы укрепить идею о том, что цепочка может продолжаться сколь угодно долго. Все заканчивается логированием нашего пользователя JSON в консоль.

Таким образом, для каждого fetch(), чьи данные вы хотите показать или изменить, вам понадобятся по крайней мере два метода then(): первый для возврата метода ответа, который извлекает ваши данные, а второй then() для работы с данными.

Fetch не только для GETting

Наши приложения вряд ли были бы динамическими, если бы они могли только читатьданные, поэтому fetch() может принимать второй аргумент, Запрос. Вы просто передаете в fetch() объект, который определяет тип запроса, который вы хотите сделать, вместе с заголовками, телом и всем остальным, что вам нужно. Добрые люди из Google создали этот пример кода в своей статье о выборке:

const options = {
  method: 'POST',
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  },
  body: 'foo=bar&lorem=ipsum',
}
fetch('https://example.com', options)
  .then((response) => response.json())
  .then((data) => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch((error) => {
    console.log('Request failed', error);
  });

Однако, чтобы отправлять данные со своей страницы, вам необходимо настроить свои серверы для правильной обработки входящей информации. Что немного выходит за рамки этого урока. Но в большинстве веб-фреймворков прием данных JSON тривиально прост.

Использование fetch() на вашем собственном сайте

fetch() может перейти на любой URL, включая ваш собственный сервер. Чтобы посетить собственные файлы вашего сайта, просто укажите относительный путь вместо URL-адреса. Если fetch() не видит «http», предполагается, что вы переходите из своего корневого каталога. Это работает на производственных или локальных серверах. Вот простой пример fetch() извлечения некоторых данных JSON из моей корневой папки на моем локальном тестовом сервере:

fetch('/test.json')
  .then((r) => r.json())
  .then(console.log)// { example: 'data' }

Иди и принеси

Вот и все, самые основы fetch(). Я настоятельно рекомендую прочитать документы MDN, статьи Google и javascript.info. Есть также более приятный способ использования выборки с Async/Await, как только вы освоитесь с этим синтаксисом, я рекомендую вам проверить его. Но лучший способ учиться — это делать, так что идите и создайте привлекательный новый сайт.

всем удачного кодирования,