Response

Интерфейс Response из Fetch API представляет собой ответ на запрос.

Вы можете создать новый экземпляр объекта Response используя конструктор Response.Response(), но скорее всего вы столкнётесь с объектом Response, как результат какой-нибудь API операции — например, service worker Fetchevent.respondWith (en-US), или WindowOrWorkerGlobalScope.fetch().

Конструктор

Response()

Создаёт новый экземпляр объекта Response.

Свойства

Response.headers (en-US) Только для чтения

Объект Headers (en-US), который описывает заголовок ответа.

Response.ok (en-US) Только для чтения

Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапазоне 200–299).

Response.redirected (en-US) Только для чтения

Указывает, является ли результат запроса перенаправлением.

Response.status (en-US) Только для чтения

Код ответа.

Response.statusText (en-US) Только для чтения

Строка, соответствующая коду ответа (например, OK для кода 200).

Response.trailers

A Promise (en-US) resolving to a Headers (en-US) object, associated with the response with Response.headers (en-US) for values of the HTTP Trailer (en-US) header.

Response.type (en-US) Только для чтения

The type of the response (e.g., basic, cors).

Response.url (en-US) Только для чтения

The URL of the response.

Response.useFinalURL

A boolean indicating whether this is the final URL of the response.

Body Interface Properties

Response implements Body, so it also has the following properties available to it:

Body.body (en-US) Только для чтения

A simple getter exposing a ReadableStream (en-US) of the body contents.

Body.bodyUsed (en-US) Только для чтения

Stores a Boolean (en-US) that declares whether the body has been used in a response yet.

Методы

Response.clone() (en-US)

Creates a clone of a Response object.

Response.error() (en-US)

Returns a new Response object associated with a network error.

Response.redirect() (en-US)

Creates a new response with a different URL.

Body Interface Methods

Response implements Body, so it also has the following methods available to it:

Body.arrayBuffer() (en-US)

Takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer.

Body.blob() (en-US)

Takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob.

Body.formData() (en-US)

Takes a Response stream and reads it to completion. It returns a promise that resolves with a FormData object.

Body.json() (en-US)

Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON, which is a JavaScript value of datatype object, string, etc.

Body.text() (en-US)

Takes a Response stream and reads it to completion. It returns a promise that resolves with a USVString (text).

Примеры

Fetching an image

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an <img> element. The fetch() call returns a promise, which resolves to the Response object associated with the resource fetch operation.

You'll notice that since we are requesting an image, we need to run Body.blob (en-US) (Response implements Body) to give the response its correct MIME type.

const image = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(blob) {
  const objectURL = URL.createObjectURL(blob);
  image.src = objectURL;
});

You can also use the Response.Response() constructor to create your own custom Response object:

const response = new Response();

Ajax запрос

Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.

// Функция, которая делает Ajax запрос
const doAjax = async () => {
    const response = await fetch('Ajax.php'); // Генерируем объект Response
    if (response.ok) {
        const jVal = await response.json(); // Парсим тело ответа
        return Promise.resolve(jVal);
        }
    else
        return Promise.reject('*** PHP file not found');
    }
}

// Вызываем doAjax и выводим результат в консоль
doAjax().then(console.log).catch(console.log);

Specifications

Specification Status Comment
Fetch
Определение 'Response' в этой спецификации.		 Живой стандарт Initial definition

Browser compatibility

BCD tables only load in the browser

See also