Английская версия: https://www.javascripttutorial.net/javascript-fetch-api/

Fetch API представляет собой современный интерфейс , который позволяет делать HTTP запросы к серверам из веб - браузеров.

Если вы уже работали с object XMLHttpRequest( XHR), Fetch API может выполнять все задачи как объект XHR.

Кроме того, Fetch API намного проще и чище. Он используется Promiseдля обеспечения более гибких функций для выполнения запросов к серверам веб-браузеров.

Метод fetch()доступен в глобальной области, которая указывает веб-браузерам отправлять запрос на URL-адрес.

Запрос: отправка запроса

fetch()Требуется только один параметр , который является URL ресурса вы хотите найти:

Метод fetch()возвращает одно Promise(обещание), чтобы вы могли использовать методы then()и catch():

Когда запрос будет выполнен, ресурс будет доступен. В этот момент Promiseбудет преобразован в объект Response.

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

Ответ: Читаем ответ

Если содержимое ответа находится в необработанном текстовом формате, вы можете использовать этот метод text(). Метод text()возвращает тот, Promiseкоторый разрешается с полным содержимым искомого ресурса:

На практике вы обычно используете async/awaitэтот метод fetch(), например:

В дополнение к методу text(), объект Responseимеет и другие методы , такие как json(), blob(), formData()и , arrayBuffer()чтобы иметь дело с их типами данных.

Работа с кодами состояния ответа

Объект Responseпредоставляет код ситуации и текст ситуации через свойства statusи statusText. Когда запрос выполнен успешно, код statusбудет 200и statusTextесть OK:

Результат:

Если запрошенный ресурс не существует, код ответа будет 404:

Результат:

Если запрошенный URL-адрес вызывает ошибку сервера, код ответа будет 500.

Если запрошенный URL-адрес перенаправлен на новый с ответом 300-309, статус объекта Responseбудет установлен на 200. Кроме того, для свойства перенаправления будет установлено значение true.

В fetch()возвращается один , Promiseкто отвергает , когда настоящий провал, например таймаут браузера, сетевое соединение потеряно или нарушение CORS.

Пример JavaScript Fetch API

Предположим, у вас есть файл, jsonрасположенный на веб-сервере, со следующим содержимым:

И такую ​​HTML-страницу:

В app.js, мы будем использовать метод fetch()для получения пользовательских данных и визуализации данных внутри элемента <div>с классом container.

Сначала объявите функцию, которую getUsers()вы ищете, users.jsonс сервера.

Затем разработайте функцию, renderUsers()которая отображает пользовательские данные:

Результат:

резюме

• Fetch API позволяет запрашивать ресурс асинхронно.
• Используйте этот метод, fetch()чтобы вернуть обещание, которое разрешается в объект Response. Чтобы получить актуальные данные, вы вызываете один из методов объекта Response, например, text()или json(). Эти методы разрешены в реальных данных.
• Используйте свойства statusи statusTextобъект, Responseчтобы получить ситуацию и текст ситуации ответа.
• Используйте метод catch()или инструкцию try...catchдля обработки запроса об ошибке.

Ознакомьтесь с серией других руководств по JavaScript, которые я написал, щелкнув ссылку ниже: