Второй параметр в fetch()

Когда мы пытаемся использовать fetch()функцию в классе, мы склонны использовать ее для получения данных из API на веб-сайте.

https://reqres.in/— это веб-сайт, предоставляющий разработчикам API для тестирования своего кода. Разработчики могут протестировать различные методы HTTP и получить реальный ответ, но поддельные данные (REQRES, 2023). Мы будем использовать этот веб-сайт для многократного тестирования нашего кода.

Например, мы можем получить поддельные данные, чтобы узнать имя пользователя изhttps://reqres.in/с fetch().

Если вы нажмете кнопку Test fetch() для получения данных , fetch попытается получить данные из 'https://reqres.in/api/users/2'методом ПОЛУЧИТЬ. Вы можете видеть, что «Джанет» добавлена ​​ниже.

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

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

Второй параметр должен быть объектом . И внутри этого объекта вы можете включить несколько подпараметров, включая тело, заголовок, метод… (MDN, 2023).

Вот пример:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Итак, как мы его используем?

В этом примере, как только пользователи нажмут кнопку «Проверить публикацию», наше приложение отправит имя пользователя и его вакансию на сервер. И внизу будет отметка времени, чтобы сообщить пользователям время создания.

.catch((ошибка) =>{})

Как мы все знаем, функция fetch() возвращает значение a Promise Object. Однако что, если сервер не ответил и обещание не было выполнено?

Будет ошибка!

Поэтому нам нужно использовать catch((error) => {}), чтобы поймать ошибку, чтобы избежать сбоя.

Давайте посмотрим пример кода.

В этом примере я «случайно» получил неправильную ссылку. Так что обещание не будет выполнено, и будет ошибка. Поэтому, если пользователи нажмут кнопку Test Post, консоль выведет «Ошибка!!!».

Подробнее об использовании объекта Response

Мы обсудили ситуацию, когда возникает ошибка, а Promise Object не выполняется. Но если объект обещания, возвращаемый , fetch()выполнен, он вернет объект Response .

Есть некоторые свойства экземпляра (MDN, 2023):

• Ответ.ок
• Статус ответа
• Response.statusText
• Ответ.url
• …

Я использовал Response.status, который возвращает код состояния HTTP, и Response.ok, который возвращает логическое значение , мы можем видеть, успешно ли выполнена выборка.

В этом примере, если пользователи нажмут кнопку «Проверить публикацию», появится код состояния HTTP и логическое значение, указывающее на успешность публикации.

Прерывание выборки

Пользователи также могут прервать выборку с помощью файла AbortController Object.

Нам нужно создать AbortController Objectотдельно.

let controller = new AbortController();

Итак, наш новый второй параметр:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Я установил интервал для прерывания(). Поэтому, когда я сначала нажимаю кнопку «Прервать», а Test Post выдает AbortError в консоли. И статус HTTP и код не будут отображаться под кнопкой Test Post, как мы это делали раньше.

Ссылка

МДН. (2023). Fetch() — веб-API: MDN. веб-API | МДН. Получено 31 марта 2023 г. сhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

ТРЕБУЕТ. (2023). Хостинговый rest-API, готовый отвечать на ваши Ajax-запросы. Треб. Получено 31 марта 2023 г. сhttps://reqres.in/

МДН. (2023). Ответ — веб-апис: MDN. веб-API | МДН. Получено 31 марта 2023 г. сhttps://developer.mozilla.org/en-US/docs/Web/API/Response

МДН. (2023). Abortcontroller — веб-apis: MDN. веб-API | МДН. Получено 31 марта 2023 г. сhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController