Понять что ответ из кеша брезура

Если я делаю запрос fetch(url).then(fnAnswer) Как мне понять, что ответ взят из кеша браузера или нет?


Ответы (2 шт):

Автор решения: Vadim

По идеи, он всегда будет без кэша

Вообще, я бы использовал следующий код(ибо хз что за фетч у тебя там):

const afetch=(_url)=>{
    return new Promise((resolve)=>{
        $.ajax({
            url: _url,
            type: 'GET',
            async: true,
            // cache: false, // можешь убрать коммент
        }).done((r)=>{
            if(!r)r = false;
            resolve(r);
        }).catch((e)=>{
            console.log(e.status, e.responseText, e);
            resolve(false);
        });
    });
};

(async()=>{
    let r = await afetch('https://www.google.ru/');
    console.log('response', r);
})();
→ Ссылка
Автор решения: Андрей Сорока

После ресеча и общения с коллегами я нашел два с половиной рабочих способа:

  1. Смотрим на все запросы в performance: performance.getEntries().filter(item=>item.initiatorType==='fetch'). Если transferSize === 0 – значит запрос из кеша. (Но поскольку у меня CORS, то этого поля нет вообще)

  2. Использовать уникальный идентификатор, например HTTP ETag. Сохранять его в new Map или просто объект. (Мне повезло, я его беру из headers)

  3. (2.5) Если с ETag не повезло, тогда уже сохраняем полностью информацию о запросе... Например method+path+getParams.

Грубый пример того, что сделал я:

const queriesHistory = {};

fetch(url).then(responce=>{
    const etag = response.headers.get('ETag');
    if (queriesHistory[etag]){ 
        console.log('Запрос из кеша');
        return;
    }

    // add to history
    queriesHistory[etag] = Date.now();
})

Удаление старых запросов:

    const ONE_HOUR = 3600000;

    // remove old
    Object.keys(queriesHistory).forEach((key) => {
        if (queriesHistory[key] + ONE_HOUR > Date.now()) {
          delete queriesHistory[key];
        }
    });
→ Ссылка