本文共 3295 字，大约阅读时间需要 10 分钟。

首先模块引入

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

转载地址：https://codeboy.blog.csdn.net/article/details/107851006 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！