First module introduction

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [].bootstrap: [AppComponent]
})
export class AppModule {}Copy the code

Use in components

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import Qs from 'qs';
@Component({
  selector: 'app-http'.templateUrl: './http.component.html'.styleUrls: ['./http.component.less']})export class HttpComponent implements OnInit {

  constructor(public http: HttpClient) { }

  ngOnInit(): void {

    this.getPostData(); //post
    this.getTestData();  //get
    this.getJsonpData()  //jsonp
  }

  getPostData() {
    this.http.post('http://localhost:3000/api/info', {
      name: 'laney'
    }, {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }).subscribe((res) = > {
      console.log(res); })}getTestData() {
    var obj1 = {
      name: 'alice'.age: '20'
    }
    var params = Qs.stringify(obj1);
    console.log(params)
    // The first method: string concatenation
    this.http.get('http://localhost:3000/api/school? ' + params).subscribe((res) = > {
      console.log(res);
    })

    // The second way: HttpParams
    var oarma = new HttpParams({ fromString: params });
    this.http.get('http://localhost:3000/api/school? ', {
      params: oarma
    }).subscribe((res) = > {
      console.log(res); })}getJsonpData() {
    this.http.jsonp('http://localhost:3000/getscript'.'callback').subscribe((res) = > {
      console.log(res); })}Copy the code

HTTP encapsulation

import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders,HttpParams} from '@angular/common/http';
import Qs from 'qs';
import { environment } from '.. /.. /environments/environment';
console.log(environment.baseURL);

@Injectable({
  providedIn: 'root'
})
export class RxjsService {

  constructor(public http:HttpClient){}postFun(url,data){
      return this.http.post(environment.baseURL+url,data,{
        headers:new HttpHeaders({
          'Content-Type':'application/json'})})}getFun(url,data){
      var params = Qs.stringify(data);
      return this.http.get(environment.baseURL+url+'? '+params)
  }
}
Copy the code

use

import { Component, OnInit } from '@angular/core';
import {RxjsService} from '.. /.. /services/rxjs.service';
@Component({
  selector: 'app-rxjs'.templateUrl: './rxjs.component.html'.styleUrls: ['./rxjs.component.less']})export class RxjsComponent implements OnInit {

  constructor(public rxjs:RxjsService) { }

  ngOnInit(): void{}getRXJS(){
    this.rxjs.getFun('/api/school', {name:'alice'
    }).subscribe((res) = >{
      console.log(res); })}postRXJS(){
    this.rxjs.postFun('/api/info', {name:'alice'
    }).subscribe((res) = >{
      console.log(res); }}})Copy the code