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) Только для чтения
Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапазоне 200299).
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 (en-US).
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