Объект запроса Request

В первом параметре функции fetch() можно передать объект запроса Request. Формат конструктора:

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

В первом параметре указывается URL-адрес (в виде строки или объекта URL) или объект запроса Request (при этом создается копия объекта). Изменим код листинга 3.14 и функции fetch() передадим объект Request:

let url = new URL('/ajax.php', window.location.href);
url.searchParams.set('txt1', txt1);
url.searchParams.set('txt2', txt2);
let myRequest = new Request(url);
// ...
let response = await fetch(myRequest);

Во втором параметре можно передать объект со следующими основными свойствами (полный список см. в документации):

  • method — метод отправки данных, например, "GET" или "POST". По умолчанию используется метод GET:
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.method); // GET
let myRequest2 = new Request('http://localhost/ajax.php', {
   method: 'POST'
});
console.log(myRequest2.method); // POST
  • headers — заголовки запроса в виде объекта Headers или простого объекта:
let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   headers: {'Content-Type':
             'application/x-www-form-urlencoded'}
});
for ( let [key, value]  of myRequest.headers ) {
   console.log( key + ' => ' + value );
} // content-type => application/x-www-form-urlencoded
  • body — тело запроса для отправки методом POST. Можно указать строку или объекты FormData, URLSearchParams, Blob и др. Пример указания строки с параметрами:
let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   headers: {'Content-Type': 
             'application/x-www-form-urlencoded'},
   body: 'txt1=1&txt2=2'
});
myRequest.text().then( function(v) {
   console.log(v); // txt1=1&txt2=2
});
  • mode — режим запроса: "cors" (разрешает кроссдоменные запросы; значение по умолчанию), "no-cors" (разрешены только простые кроссдоменные запросы и обычные запросы; при выполнении кроссдоменного запроса возвращается пустой объект ответа: свойство status будет иметь значение 0, свойство statusText — пустую строку, свойство headers — пустой объект Headers, свойство body — null, свойство type — opaque), "same-origin" (кроссдоменные запросы запрещены) или "navigate":
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.mode); // cors
  • redirect — режим обработки перенаправления: "follow" (обрабатывать перенаправления; значение по умолчанию), "error" (выдавать ошибку при перенаправлении) или "manual" (при наличии перенаправления возвращается пустой объект ответа: свойство status будет иметь значение 0, свойство statusText — пустую строку, свойство headers — пустой объект Headers, свойство body — null, свойство type — opaqueredirect):
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.redirect); // follow
  • credentials — режим отправки cookies: "omit" (никогда не отправлять и не получать), "same-origin" (отправлять только на тот же источник) или "include" (всегда отправлять). Значение по умолчанию зависит от Web-браузера и его версии:
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.credentials); // omit или same-origin
  • cache — режим кеширования: "default", "no-store", "reload", "no-cache", "force-cache" или "only-if-cached":
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.cache); // default
  • referrer — значение HTTP-заголовка Referer:
let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.referrer);       // about:client
  • referrerPolicy — политика указания HTTP-заголовка Referrer: "no-referrer" (заголовок Referrer не отправляется), "no-referrer-when-downgrade", "origin" (отправляется ссылка на центральную страницу), "origin-when-cross-origin" (отправляется полная ссылка для того же источника и ссылка на центральную страницу для других источников), "unsafe-url";
  • integrity — хеш-код для проверки целостности данных, например, SHA-256.

Объект с такими же свойствами (а также с некоторыми дополнительными) можно передать во втором параметре функции fetch():

let response = await fetch(url, {
   method: 'GET',
   mode: 'cors',
   referrerPolicy: 'origin'
});

С помощью одноименных свойств можно получить значения после создания объекта запроса. Свойства доступны только для чтения. Получить URL-адрес позволяет свойство url:

let myRequest = new Request('http://localhost/ajax.php');
console.log(myRequest.url); // "http://localhost/ajax.php"

Свойство bodyUsed содержит значение true, если содержимое свойства body было уже прочитано, и false — в противном случае. Следует учитывать, что содержимое свойства body можно прочитать только один раз. Попытка повторного прочтения приведет к исключению TypeError. Получим содержимое свойства body в виде текста и выведем значение свойства bodyUsed до и после прочтения:

let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   headers: {'Content-Type': 'application/x-www-form-urlencoded'},
   body: 'txt1=1&txt2=2'
});
console.log(myRequest.bodyUsed);      // false
myRequest.text().then( function(v) {
   console.log(v);                    // txt1=1&txt2=2
   console.log(myRequest.bodyUsed);   // true
});

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

  • clone() — создает копию объекта. Если содержимое свойства body было уже прочитано (свойство bodyUsed имеет значение true), то будет сгенерировано исключение TypeError. Пример создания копии:
let myRequest = new Request('http://localhost/ajax.php');
let myRequest2 = myRequest.clone();
console.log(myRequest2.url); // "http://localhost/ajax.php"

Для создания копии можно также воспользоваться конструктором:

let myRequest = new Request('http://localhost/ajax.php');
let myRequest2 = new Request(myRequest);
console.log(myRequest2.url); // "http://localhost/ajax.php"
  • text() — возвращает объект Promise содержащий значение свойства body в виде простого текста:
let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   body: 'txt1=1&txt2=2'
});
myRequest.text().then( function(v) {
   console.log(v);                    // txt1=1&txt2=2
});
  • formData() — возвращает объект Promise, содержащий значение свойства body в виде объекта FormData. При ошибке генерируется исключение TypeError. Пример:
let formData = new FormData();
formData.append('txt1', '1');
formData.append('txt2', '2');
let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   body: formData
});
myRequest.formData().then( function(v) {
   for ( let [key, value] of v ) {
      console.log( key + ' => ' + value );
   }
});
// txt1 => 1
// txt2 => 2
  • json() — возвращает объект Promise содержащий значение свойства body в виде объекта JSON. При ошибке генерируется исключение SyntaxError. Пример:
let myRequest = new Request('http://localhost/ajax.php', {
   method: 'POST',
   body: '{"txt1":"1","txt2":"2"}'
});
myRequest.json().then( function(json) {
   console.log( json.txt1 ); // 1
   console.log( json.txt2 ); // 2
});
  • blob() — возвращает объект Promise содержащий значение свойства body в виде объекта Blob;
  • arrayBuffer() — возвращает объект Promise содержащий значение свойства body в виде объекта ArrayBuffer.
Обратите внимание

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

Помощь сайту

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

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