comment convertir api post-appel ajax en angular8

Vous pouvez créer un service Like et appeler un composant.

services.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './services.ts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class Components implements OnInit {

 constructor(public userService: UserService){}

 public ngOnInit(): void {
    const data = { apiKey: "myapikey" }
    this.userService.getData(url, data).subscribe((res)=>{
     code...
    })
    
  }
}

components.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
    providedIn: "root"
})

export class UserService{

  constructor(public http: HttpClient){}

 let headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': ''
 });

  public getData(url: string, data: any): Observable<any> {
        return this.http.post(url, data, { headers: headers});
  }
}

créez un service comme ci-dessous.

import { Component, OnDestroy, OnInit, VERSION } from "@angular/core";
import { ScheduleDataService } from "./schedule-data.service.ts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, OnDestroy {
  name = "Angular " + VERSION.major;

  private subscription;
  constructor(private _scheduleDataService: ScheduleDataService) {}

  ngOnInit() {
    this.subscription = this._scheduleDataService
      .fetchData("https://xyz/client/schedule", {
        apiKey: "myapikey"
      })
      .subscribe(
        data => {
          // Data on Success
          console.log("data", data);
        },
        error => {
          console.log("error", error);
        }
      );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

alors vous pouvez appeler ce service dans votre composant comme ci-dessous.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class ScheduleDataService {
  constructor(private _http: HttpClient) {}

  fetchData(url: string, data: any): Observable<any> {
    const headers = {
      Authorization: "Bearer my-token",
      "My-Custom-Header": "foobar",
      contentType: "application/json"
    };

    return this._http.post(url, data, {
      headers
    });
  }
}

Faites-moi savoir si vous avez le moindre doute.

L'analyse des requêtes HTTP est assez simple dans Angular. Voici les étapes à suivre:

Étape 1:

importez le HttpClientModule dans votre module d'application comme ceci:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

Étape 2:

Créez un service pour votre application dans lequel vous stockerez tous les appels de requête HTTP.

REMARQUE: Cette partie n'est pas nécessaire car vous pouvez effectuer des appels HTTP directement dans votre composant, mais pour les meilleures pratiques et une bonne structure, cela doit être suivi

Donc pour cette étape, importez HttpClient soit dans votre service (si vous l'avez créé), soit dans votre composant, puis procédez comme suit:

import { HttpInterceptor, HttpErrorResponse, HttpEvent, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { Router } from '@angular/router';
import { Service } from 'service.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private router: Router, private service: Service) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (sessionStorage.getItem('token')) {
            const cloned = req.clone({
                headers: req.headers.set('Authorization', 'Bearer ' + sessionStorage.getItem('token'))
            });
            return next.handle(cloned).pipe(
                catchError((err, caught: Observable<HttpEvent<any>>) => {
                    if (err instanceof HttpErrorResponse && (err.status == 401)) 
                    {
                        this.adminAuthService.clearAuthData();
                        this.router.navigate(['required route path']);
                        alert('Session Timeout !! Login Again');
                        return of(err as any);
                    }
                    throw err;
                })
            );
        }
        return next.handle(req);
    }
}

Laissez-moi vous expliquer la méthode createExamCategory() . Les data paramètre sont la valeur provenant de votre HTML ou de n'importe quelle source. Et ces data seront transmises dans la requête POST . La ligne suivante est comme je l'explique avec le service, je viens de retourner l'appel et je m'y subscribe dans le composant. Le <{ message: string }> est la réponse que j'obtiens de la demande d'API. Si vous n'êtes pas sûr de la réponse que vous obtenez, vous pouvez simplement la conserver comme <any> et Angular décidera du type de réponse. Ensuite, dans la méthode de post (cette méthode provient de HttpClient déclaré ci-dessus), nous avons 2 passes aux paramètres par défaut et le troisième paramètre qui est HttpHeader est facultatif. Les 2 paramètres sont:

1. URL de l'API.
2. Les données du corps de la requête pour la requête POST .

C'est donc tout du côté appelant maintenant à la partie abonnement:

Si vous écrivez directement la partie ci-dessus dans le composant, continuez avec .subscribe() . Maintenant pour la partie service:

Étape 1: Importez le service:

import { SampleService } from 'sample.service';

constructor(private service: SampleService) { }

// Do the call where it is required. I am doing in a normal method

httpMethod() {
  this.service.subscribe(response => {
    console.log(response); // This is the API response
  });
}

Intercepteur

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

createExamCategory(data) {
  return this.http.post<{ message: string }>(this.url + '/category/create_exam', data);
}

Ici, ce que j'ai fait, c'est lors de la connexion / authentification, j'ai stocké le jeton JWT généré par le service backend en session et validé si l'URL de l'API est valide ou non.

Après avoir fait cela dans app.module.ts, spécifiez l'intercepteur dans les providers comme ceci:

import { HttpClientModule } from '@angular/common/http';
imports: [ HttpClientModule ]

En espérant que cela vous aidera 🠙 ‚