Как кэш Axios запрашивает данные?

внешний интерфейс JavaScript
Как кэш Axios запрашивает данные?

Эта статья является последней в тетралогии Axios, эта статья расскажет, как пройтиУсовершенствованный адаптер по умолчаниюдля кэширования данных запроса. Так зачем кешировать данные запроса? Это связано с тем, что, когда кеш не аннулирован, мы можем напрямую использовать кешированные данные, не инициируя запрос на получение данных с сервера, что может не только сократить HTTP-запросы, но и сократить время ожидания для улучшения взаимодействия с пользователем.

Поскольку в этой статье будет использоватьсяAxiosАдаптер по умолчанию предоставляется для реализации функции кэширования данных запроса, поэтому, если вы не знакомы с адаптером Axios, рекомендуется сначала ознакомиться с ним.Какие уроки можно извлечь из проекта 77.9K Axios?Эта статья. Чтобы вы могли лучше понять последующее содержание, давайте взглянем на общую блок-схему:

Рабочий процесс в синей части рисунка выше находится в центре внимания этой статьи. Далее Брат Абао начнет с того, как спроектировать кеш и возьмет всех на разработку функции кеширования данных запросов.

1. Как спроектировать тайник

В вычислительной технике кеш — это уровень высокоскоростного хранения данных, в котором хранятся подмножества данных, обычноэфемерныйхранилище, чтобы будущие запросы к этим данным выполнялись быстрее, чем доступ к основному месту хранения данных. Благодаря кэшированию вы можете эффективно повторно использовать ранее извлеченные или вычисленные данные. Поняв роль кеша, давайте разработаем API кеша:

  • get(key): Получить указанное из кешаkeyсоответствующее значение;
  • удалить (ключ): удалить указанное из кешаkeyсоответствующее значение;
  • clear(): очистить кешированные данные;
  • set(key, value, maxAge): сохраняет пары ключ-значение и поддерживает настройку максимального времени кэширования, т.е.maxAgeЕдиница измерения — миллисекунды.

На основе приведенного выше API кеша мы можем реализовать простую функцию кеша, конкретный код выглядит следующим образом:

const MemoryCache = {
  data: {},
  set(key, value, maxAge) { // 保存数据
    this.data[key] = {
      maxAge: maxAge || 0,
      value,
      now: Date.now(),
     };
  },
  get(key) { // 从缓存中获取指定 key 对应的值。
    const cachedItem = this.data[key];
    if (!cachedItem) return null;
    const isExpired = Date.now() - cachedItem.now > cachedItem.maxAge;
    isExpired && this.delete(key);
    return isExpired ? null : cachedItem.value;
  },
  delete(key) { // 从缓存中删除指定 key 对应的值。
    return delete this.data[key];
  },
  clear() { // 清空已缓存的数据。
    this.data = {};
  },
};

На самом деле, помимо пользовательских объектов кэша, вы также можете использовать зрелые сторонние библиотеки, такие какlru-cache.

Алгоритм устранения кеша LRU является общей стратегией. Полное название LRU — наименее недавно использованное, что означает, что мы считаем, что данные, которые использовались недавно, должны быть «полезными», а данные, которые давно не использовались, должны быть бесполезными. , удаляйте те, которые давно не используются.данные.

Во-вторых, как улучшить адаптер по умолчанию

Axios представляет адаптеры, которые позволяют ему поддерживать среду как браузера, так и среды Node.js. Для среды браузера он инкапсулируетXMLHttpRequestAPI для отправки HTTP-запросов, а для среды Node.js — встроенный в Node.js.httpиhttpsмодуль для отправки HTTP-запросов.

Прежде чем представить, как улучшить адаптер по умолчанию, давайте рассмотрим процесс полного запроса Axios:

После полного понимания процесса запроса Axios, давайте взглянем на встроенный Axios.xhrAdapterадаптер, который определен вlib/adapters/xhr.jsВ файле:

// lib/adapters/xhr.js
module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    var requestData = config.data;
    var requestHeaders = config.headers;

    var request = new XMLHttpRequest();
    // 省略大部分代码
    var fullPath = buildFullPath(config.baseURL, config.url);
    request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
    // Set the request timeout in MS
    request.timeout = config.timeout;

    // Listen for ready state
    request.onreadystatechange = function handleLoad() { ... }

    // Send the request
    request.send(requestData);
  });
};

Это понятноxhrAdapterАдаптер — это функциональный объект, который получаетconfigпараметр и вернутьPromiseобъект. пока вxhrAdapterВнутри адаптера XMLHttpRequest API в конечном итоге используется для отправки HTTP-запросов. Чтобы реализовать функцию кэширования данных запроса, мы можем рассмотреть возможность ее улучшения с помощью функций более высокого порядка.xhrAdapterфункция адаптера.

Следуйте «Дорога к бессмертному совершенствованию с полным стеком», чтобы прочитать 4 бесплатные электронные книги (всего более 30 000 загрузок) и 50 серий руководств по TS, изначально написанных А Баогэ.

2.1 Определение вспомогательных функций

2.1.1 Определение функции generateReqKey

ПовышеннаяxhrAdapterПеред адаптером давайте определимgenerateReqKeyФункция, которая используется для генерации ключа запроса в соответствии с информацией текущего запроса;

function generateReqKey(config) {
  const { method, url, params, data } = config;
  return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

пройти черезgenerateReqKeyКлюч запроса, сгенерированный функцией, будет использоваться в качестве ключа элемента кэша, и соответствующее значение является значением по умолчанию.xhrAdapterОбъект Promise, возвращенный адаптером.

2.1.2 Определение функции isCacheLike

isCacheLikeФункция используется для определения того, реализует ли входящий параметр кеша ранее определенный Cache API. С помощью этой функции мы позволяем пользователям настраивать объект кеша для каждого запроса.

function isCacheLike(cache) {
	return !!(cache.set && cache.get && cache.delete && cache.clear  
		&& typeof cache.get === 'function' && typeof cache.set === 'function' 
    && typeof cache.delete === 'function' && typeof cache.clear === 'function'
  );
}

2.2 Определение функции cacheAdapterEnhancer

Чтобы пользователи могли более гибко управлять функцией кэширования данных, мы определяемcacheAdapterEnhancerфункция, которая принимает два аргумента:

  • адаптер: предварительно расширенный объект адаптера Axios;
  • options: объект конфигурации кэша, этот объект поддерживает 4 свойства, которые используются для настройки различных функций:
    • maxAge: максимальное время настройки глобального кэша;
    • enableByDefault: следует ли включить кэширование, по умолчанию установлено значение true;
    • cacheFlag: флаг кеша, используемый для настройки свойств кеша в объекте конфигурации запроса;
    • defaultCache: используется для установки используемого объекта кэша.

пониматьcacheAdapterEnhancerПосле параметров функции давайте посмотрим на конкретную реализацию функции:

function cacheAdapterEnhancer(adapter, options) {
  const { maxAge, enabledByDefault = true,
    cacheFlag = "cache", defaultCache = MemoryCache,
  } = options;
  
  return (config) => {
    const { url, method, params, forceUpdate } = config;
    let useCache = config[cacheFlag] !== undefined && config[cacheFlag] !== null
        ? config[cacheFlag]
        : enabledByDefault;
      if (method === "get" && useCache) {
        const cache = isCacheLike(useCache) ? useCache : defaultCache;
        let requestKey = generateReqKey(config);  // 生成请求Key
        let responsePromise = cache.get(requestKey); // 从缓存中获取请求key对应的响应对象
        if (!responsePromise || forceUpdate) { // 缓存未命中/失效或强制更新时，则重新请求数据
           responsePromise = (async () => {
             try {
               return await adapter(config);  // 使用默认的xhrAdapter发送请求
             } catch (reason) {
                 cache.delete(requestKey);
                 throw reason;
                }
           })();
           cache.set(requestKey, responsePromise, maxAge);  // 保存请求返回的响应对象
           return responsePromise; // 返回已保存的响应对象
       }
       return responsePromise;
     }
     return adapter(config); // 使用默认的xhrAdapter发送请求
   };
}

Приведенный выше код не сложен, а основная логика обработки показана на следующем рисунке:

2.3 Использование функции cacheAdapterEnhancer

2.3.1 Создайте объект Axios и настройте параметры адаптера
const http = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
    enabledByDefault: false, // 默认禁用缓存
    maxAge: 5000, // 缓存时间为5s
  }),
});
2.3.2 Отправка запросов с помощью объекта http
// 使用缓存
async function requestWithCache() {
  const response = await http.get("/todos/1", { cache: true });
  console.dir(response);
}

// 不使用缓存
async function requestWithoutCache() {
  const response = await http.get("/todos/1", { cache: false });
  console.dir(response);
}

На самом деле, помимо поддержки логических значений, атрибут cache также может настраивать объекты кэша, которые реализуют Cache API. Конкретные примеры использования приведены ниже:

const customCache = { get() {/*...*/}, set() {/*...*/}, delete() {/*...*/}, clear() {/*...*/}};
      
async function requestForceUpdate() {
  const response = await http.get("/todos/1", {
    cache: customCache,
    forceUpdate: true,
  });
  console.dir(response);
}

Ну как пройти улучшениеxhrAdapterВведен адаптер для реализации функции запроса данных кэша Axios. Так как полный пример кода содержит много контента, Brother Abao не будет помещать конкретный код. Заинтересованные партнеры могут посетить следующий адрес, чтобы просмотреть пример кода.

Полный пример кода:gist.GitHub.com/Semelinker/Нет…

3. Резюме

В этой статье описывается, как кэшировать данные запроса в Axios и как проектировать объекты кэша на основеcacheAdapterEnhancerфункцию, вы можете легко расширить функциональность кэша. На данный момент обновлены четыре части Axios.Далее приведены ссылки на другие статьи.Заинтересованные партнеры могут ознакомиться с ними. Извините за плохое письмо.

Следуйте «Дорога полного стека», чтобы прочитать 4 бесплатные электронные книги (всего более 30 000 загрузок) и 11 руководств по Vue 3 для продвинутых пользователей.Друзья, которые хотят вместе изучать TS/Vue 3.0, могут добавить Abaoge WeChat —— semlinker.

4. Справочные ресурсы

Категории