Объект ответа Response

Функция fetch() возвращает объект Promise, содержащий в себе объект ответа Response. В случае необходимости можно создать объект Response вручную с помощью следующего конструктора:

<Объект> = new Response([<body>[, <Объект с опциями>]])

Все параметры являются необязательными. В первом параметре можно задать тело ответа в виде строки или объектов FormData, URLSearchParams, Blob, BufferSource, ReadableStream. Во втором параметре указывается объект со следующими свойствами:

  • status — код статуса ответа, например, 200;
  • statusText — статус ответа в виде строки, например, OK;
  • headers — заголовки ответа сервера в виде простого объекта или объекта Headers.

Пример:

let params = new URLSearchParams('x=5&y=3');
let myResponse = new Response(params, {
   'status': 404,
   'statusText': 'Not Found'
});
console.log(myResponse.status);       // 404
console.log(myResponse.statusText);   // Not Found
myResponse.text().then( function(v) {
   console.log(v);                    // x=5&y=3
});

Объект Response содержит следующие свойства (доступны только для чтения):

  • status — код статуса ответа, например, 200;
  • statusText — статус ответа в виде строки, например, OK;
  • ok — содержит значение true, если код статуса ответа в пределах от 200 до 299, и false — в противном случае;
  • headers — заголовки ответа сервера в виде объекта Headers;
  • redirected — содержит значение true, если выполнялись перенаправления, и false — в противном случае;
  • url — URL-адрес ресурса, с которого был получен ответ;
  • type — тип ответа: basic (обычный), cors (при выполнении кроссдоменного запроса), error (при ошибке), opaque (выполнение кроссдоменного запроса при опции mode равной "no-cors") или opaqueredirect (перенаправление при опции redirect равной "manual");
  • bodyUsed — содержит значение true, если содержимое свойства body было уже прочитано, и false — в противном случае. Следует учитывать, что содержимое свойства body можно прочитать только один раз. Попытка повторного прочтения приведет к исключению TypeError.

Объект Response содержит следующие методы:

  • clone() — создает копию объекта. Если содержимое свойства body было уже прочитано (свойство bodyUsed имеет значение true), то будет сгенерировано исключение TypeError. Поэтому, если хотите прочитать ответ в разных форматах, то предварительно нужно создать копию объекта;
  • text() — возвращает объект Promise содержащий значение свойства body в виде простого текста:
let params = new URLSearchParams('x=5&y=3');
let myResponse = new Response(params);
myResponse.text().then( function(v) {
   console.log(v);                    // x=5&y=3
});
  • formData() — возвращает объект Promise содержащий значение свойства body в виде объекта FormData. При ошибке генерируется исключение TypeError. Пример:
let formData = new FormData();
formData.append('txt1', '1');
formData.append('txt2', '2');
let myResponse = new Response(formData);
myResponse.formData().then( function(v) {
   for ( let [key, value] of v ) {
      console.log( key + ' => ' + value );
   }
});
// txt1 => 1
// txt2 => 2
  • json() — возвращает объект Promise содержащий значение свойства body в виде объекта JSON. При ошибке генерируется исключение SyntaxError. Пример:
let myResponse = new Response('{"txt1":"1","txt2":"2"}');
myResponse.json().then( function(json) {
   console.log( json.txt1 ); // 1
   console.log( json.txt2 ); // 2
});
  • blob() — возвращает объект Promise содержащий значение свойства body в виде объекта Blob. Загрузим изображение с сервера, вернем его в виде объекта Blob, а затем получим его адрес в памяти с помощью статического метода createObjectURL() из класса URL и присвоим адрес параметру src тега <img> с идентификатором img1:
<img src="/img/photo.jpg" alt="" id="img1">
fetch('/img/img_w200h200.jpg')
   .then( function(response) {
      return response.blob();
   })
   .then( function(blob) {
      let url = URL.createObjectURL(blob);
      document.getElementById('img1').src = url;
   });
  • arrayBuffer() — возвращает объект Promise содержащий значение свойства body в виде объекта ArrayBuffer.
Обратите внимание

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов