Как правильно предварительно выбрать конечную точку json в Chrome? - PullRequest
Новая
       39

Как правильно предварительно выбрать конечную точку json в Chrome?

3 голосов
/ 22 апреля 2020

Я пытаюсь ускорить критический сетевой путь на веб-сайте и узнаю о великом <link rel=preload. Поэтому я пытаюсь предвидеть вызов, который выполняет мое одностраничное приложение, как только пикает JS, я вставил свой индекс. html

<link rel="preload" href="/api/searchItems" as="fetch" />

Затем, когда JS запускается, я сделать тот же вызов с помощью библиотеки axios: 

await axios.get(`/api/searchItems`, { params: queryParams });

Я бы ожидал, что вызов Ax ios мгновенно вернет предварительно загруженный файл JSON, но вместо этого я вижу это:

enter image description here

Как видите, один и тот же вызов загружается дважды. Что я делаю не так?

РЕДАКТИРОВАТЬ: Я добавил cache-control: public и ничего не меняется. EDIT2: я также попробовал этот код вместо топора ios: 

  let data = await fetch('/api/searchItems')
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('HTTP error ' + response.status);
    })
    .catch(() => {
      data = null; // Just clear it and if it errors again when
      // you make the call later, handle it then
    });

и ничего не изменилось

1 Ответ

1 голос
/ 22 апреля 2020

Три варианта для вас:

  1. Похоже, в вашем ответе есть заголовки, которые по какой-то причине делают его не кэшируемым. Вы можете исправить это так, что он может быть кэширован.

  2. Используйте работника службы .

  3. Другой подход, если это действительно критический путь, это наличие некоторого встроенного JavaScript, который фактически выполняет вызов, и изменения кода, который будет выполнять вызов позднее, чтобы посмотреть, доступен ли предыдущий результат, например: 

    let firstLoad = fetch("/api/searchItems")
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        throw new Error("HTTP error " + response.status);
    })
    .catch(() => {
        firstLoad = null; // Just clear it and if it errors again when 
                          // you make the call later, handle it then
    });

    (я использую fetch там, потому что вы можете сделать это до того, как загрузите axios.)

    Затем в коде, который хочет эти данные: 

    (firstLoad || axios.get("/api/searchItems").then(response => response.data))
.then(/*...*/)
.catch(/*...*/);
firstLoad = null;

Если контент требует повторной проверки (и вы используете no-cache, так оно и есть), # 2 и # 3 имеют то преимущество, что не требуют повторного запроса к сервер.

¹ От MDN :

no-cache

Ответ может быть сохранен в любом кэше, даже если ответ обычно не кэшируется. Тем не менее, сохраненный ответ ДОЛЖЕН всегда go через проверку на сервере происхождения, прежде чем использовать его ...

(мой акцент)

...