(精华2020年6月9日更新)Angular实战篇 http请求模块的使用

首先模块引入

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 {
      }

组件中使用

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)
    //第一种方式：字符串拼接
    this.http.get('http://localhost:3000/api/school?' + params).subscribe((res) => {
     
      console.log(res);
    })

    //第二种方式：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);
    })
  }

http封装

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)
  }
}

使用

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);
    })
  }

}