Webdev

Простое кеширование http запроса с одинаковыми параметрами / Simple caching of http request with the same parameters

Как это работает:

Есть асинхронный запрос, его входные параментры сохраняем в переменную _getModelCacheLastRequest. Далее делаем запрос на сервер, и сам промис этого запроса (this.http.get(endpointUrl, { params }).toPromise().then) сохраняем в переменную _getModelRequestPromise. Теперь если еще раз вызовем этот запрос с предыдущими параметрами, которые мы сохраняли, то мы возвращаем старый промис, предыдущего запроса. И что важно, если запрос уже выполнился, то повторная подписка на промис вернет значение с которым он завершился, а если еще не выполнился запрос, то мы будем поставлены в очередь ожидания.

How it works:

There is an asynchronous request, its input parameters are stored in the variable _getModelCacheLastRequest. Next, we make a request to the server, and the promise itself of this request (this.http.get(endpointUrl, { params }).toPromise().then) is stored in the variable _getModelRequestPromise. Now if we call this request again with the previous parameters that we saved, then we return the old promise from the previous request. And what’s important, if the request has already been completed, then re-subscribing to the promise will return the value with which it ended, and if the request has not yet been fulfilled, then we will be put on hold.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
private _getModelRequestPromise: Promise<Model> = null;
private _getModelCacheLastRequest: Object = null;

getServeModel(carCode: string, carId: number, dateEnd: Date): Promise<Model> {

    return new Promise((resolve) => {

      if (JSON.stringify(this._getModelCacheLastRequest) === JSON.stringify({ carCode, carId, dateEnd })) {

        return this._getModelRequestPromise.then((response) => {
          resolve(response);

          console.log('from cache', this._getModelCacheLastRequest, response);
          return response;
        });
      } else {

        this._getModelCacheLastRequest = { carCode, carId, dateEnd };

        const endpointUrl = `${this.getModelUrl}`;

        const params = new HttpParams()
          .set('carCode', carCode)
          .set('carId', carId ? carId.toString() : null)
          .set('dateEnd', dateEnd.toDateString());

        this._getModelRequestPromise = this.http.get<Model>(endpointUrl, { params }).toPromise().then(response => {
          resolve(response);

          console.log('from server', response);
          return response;
        });

        return this._getModelRequestPromise;
      }

    });

  }
Share