這篇文章主要介紹了Angular中http請(qǐng)求模塊的使用方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在襄汾等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供成都做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都全網(wǎng)營(yíng)銷(xiāo)推廣,外貿(mào)網(wǎng)站建設(shè),襄汾網(wǎng)站建設(shè)費(fèi)用合理。

首先模塊引入

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

}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular中http請(qǐng)求模塊的使用方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)題目：Angular中http請(qǐng)求模塊的使用方法-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/jcdje.html