Використання fetch() для HTTP запитів

Категория: JavaScript

fetch() usage

const conf = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'X-Header-My': 'header value',
    'cache-control': 'no-cache',
  },
  body: JSON.stringify({foo: 'bar'})
};

const nocache = new Date().getTime() + '-' + (Math.random() + 1).toString(36).substring(7); // 1697705531397-mxz9s
const users = await fetch(`/url?nocache=${nocache}`).then(r => r.json()).then(data => data.users)

Обʼєкт типу Headers:

const headers = new Headers();
headers.append('cache-control', 'no-cache');


fetch() cache

// Ігнорувати кеш (cache busting), щоб повністю обійти кеш.
fetch('version.txt', {cache: 'no-store'});

// Ігнорувати поточний кеш (cache busting) та оновити HTTP cache.
fetch('version.txt', {cache: 'reload'});

// Ігнорувати поточний кеш (cache busting), коли маєте справу з належним чином налаштованим сервером, який надсилатиме правильні заголовки ETag і Date і належним чином оброблятиме заголовки запитів If-Modified-Since та If-None-Match, тому ми можемо покладатися на перевірку, щоб гарантувати свіжість відповіді.
fetch('version.txt', {cache: 'no-cache'});

// Надати перевагу кешованій, хоча й застарілій відповіді, щоб максимально зберегти пропускну здатність.
fetch('version.txt', {cache: 'force-cache'});



new Date().toISOString().slice(14, 19); // 30:58
(Math.random() + 1).toString(36).substring(7); // mxz9s
crypto.randomUUID() // 2500a7ef-0cb8-4ac3-81cf-1dd208376f9f

#fetch cache #fetch cache ignore #fetch cache busting

категория: JavaScript