Angular 7 результатов Cache API - PullRequest
Новая
       9

Angular 7 результатов Cache API

0 голосов
/ 29 января 2020

Я боролся со следующим: у меня есть приложение ioni c на основе angular, и я пытаюсь кэшировать результаты для автономного использования. Мне не нужно (обязательно) проверка в режиме онлайн / офлайн, поскольку я думаю, что могу справиться с этим самостоятельно.

Поставщик инъекционных / почтовых услуг 

import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/add/operator/map";
//import {Observable,of, from } from 'rxjs';

@Injectable()
export class PostProvider {
  //private records$: Observable<Record[]>;
  server: string = "https://server/api_endpoint/";

  constructor(public http: Http) {}

  postData(body, file) {
    let type = "application/json; charset=UTF-8";
    let headers = new Headers({ "Content-Type": type });
    let options = new RequestOptions({ headers: headers });

    return this.http
      .post(this.server + file, JSON.stringify(body), options)
      .map(res => res.json());
  }
}

Компонент

В компоненте я использую aksi для инструкций CRUD по отношению к API 

  loadCustomer() {


    return new Promise(resolve => {
      let body = {
        aksi: "getdata",
        user: this.username
      };

      this.postPvdr.postData(body, "proses-api.php").subscribe(
        data => {
          for (let customer of data.result) {
            //this.customers.push(customer);
            this.logn = customer.nume;
            this.logn = customer.pret;
            this.comis = customer.comis +' %';
            this.rhg = customer.rhg;
            this.pdg = customer.pdg;
            this.ptg = customer.ptg;
            this.defaultList.push(customer);
          }

//defaultList is used to serve up the data into an autocomplete field

          this.completeTestService.customerList = this.defaultList;
          resolve(true);
        },
  );
    });
  }

У меня нет прав до angular так что я едва понял концепцию Observables из быстрых ссылок. Я пытался создать его с помощью $ cacheFactory , но это ошеломило. Последовал видеоролик о том, как это сделать, но он оказался для предыдущих angular версий. Наткнулся на это

image

И когда я попытался его реализовать, получилось Generic type 'Record' requires 2 type argument(s)

Если для написания кода требуется слишком много, любой пример как это должно работать или (ясно) документация будет благословением. Потратив на это часы, я чувствую себя глупо.

1 Ответ

1 голос
/ 30 января 2020

Документы Angular предоставляют некоторые примеры , как кэшировать http-запросы , используя перехватчик. Служба кэширования не предоставляется, поэтому для этого вам нужно будет создать собственную службу.

Ниже приведен один из их фрагментов о том, как кэшировать http-запросы в Angular. 

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
  constructor(private cache: RequestCache) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // continue if not cachable.
    if (!isCachable(req)) { return next.handle(req); }

    const cachedResponse = this.cache.get(req);
    return cachedResponse ?
      of(cachedResponse) : sendRequest(req, next, this.cache);
  }
}

/**
 * Get server response observable by sending request to `next()`.
 * Will add the response to the cache on the way out.
 */
function sendRequest(
  req: HttpRequest<any>,
  next: HttpHandler,
  cache: RequestCache): Observable<HttpEvent<any>> {

  // No headers allowed in npm search request
  const noHeaderReq = req.clone({ headers: new HttpHeaders() });

  return next.handle(noHeaderReq).pipe(
    tap(event => {
      // There may be other events besides the response.
      if (event instanceof HttpResponse) {
        cache.put(req, event); // Update the cache.
      }
    })
  );
}
* 1007. * Обязательно укажите перехватчик в модуле, в котором вы планируете его использовать.
...