Response
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Интерфейс Response
из Fetch API представляет собой ответ на запрос.
Вы можете создать новый экземпляр объекта Response
используя конструктор Response.Response()
, но скорее всего вы столкнётесь с объектом Response
, как результат какой-нибудь API операции — например, service worker Fetchevent.respondWith
, или fetch()
.
Конструктор
Response()
-
Создаёт новый экземпляр объекта
Response
.
Свойства
Response.headers
Только для чтения-
Объект
Headers
, который описывает заголовок ответа. Response.ok
Только для чтения-
Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапазоне
200
–299
). Response.redirected
Только для чтения-
Указывает, является ли результат запроса перенаправлением.
Response.status
Только для чтения-
Код ответа.
Response.statusText
Только для чтения-
Строка, соответствующая коду ответа (например,
OK
для кода200
). Response.trailers
-
A
Promise
resolving to aHeaders
object, associated with the response withResponse.headers
for values of the HTTPTrailer
header. Response.type
Только для чтения-
The type of the response (e.g.,
basic
,cors
). Response.url
Только для чтения-
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
Только для чтения-
A simple getter exposing a
ReadableStream
of the body contents. Body.bodyUsed
Только для чтения-
Stores a
Boolean
that declares whether the body has been used in a response yet.
Методы
Response.clone()
-
Creates a clone of a
Response
object. Response.error()
-
Returns a new
Response
object associated with a network error. Response.redirect()
-
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()
-
Takes a
Response
stream and reads it to completion. It returns a promise that resolves with anArrayBuffer
. Body.blob()
-
Takes a
Response
stream and reads it to completion. It returns a promise that resolves with aBlob
. Body.formData()
-
Takes a
Response
stream and reads it to completion. It returns a promise that resolves with aFormData
object. Body.json()
-
Takes a
Response
stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text asJSON
, which is a JavaScript value of datatype object, string, etc. Body.text()
-
Takes a
Response
stream and reads it to completion. It returns a promise that resolves with aUSVString
(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
(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);
Спецификации
Specification |
---|
Fetch Standard # response-class |
Совместимость с браузерами
BCD tables only load in the browser