Angular數據請求（get,post）

一、Angular get請求數據

Angular5.x以后get, post和和服務器交互使用的是HttpClientModule模塊。

1、在app.module.ts中引入HttpClientModule並注入

import {HttpClientModule} from '@angular/common/http'

imports:[
    BrowserModule,
    HttpClientModule
]

2、在用到的地方引入HttpClient並在構造函數聲明

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

constructor(public http:Httpclient) {}

3. get請求數據

var url= "http://127.0.0.1:8080/api/productlist"; this.http.get(url).subscribe (response =>{ console.log(response); })

 

二、Angular post提交數據

Angular5.x以后get, post和和服務器交互使用的是HttpClientModule模塊。

1、在app.module.ts中引入HttpClientModule注入

import {HttpClientModule} from '@angular/common/http'

imports:[
    BrowserModule,
    HttpClientModule
]

2、在用到的地方引入HttpClient、HttpHeaders並在構造函數聲明HttpClient

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

constructor(public http:Httpclient) {}

3, post提交數據

var url="http://127.0.0.1:8080/doLogin";

this.http.post(url, {"age":22,"username":"zl"})
  .subscribe((response)=>{
    console.log(response)
  })

 

三、Angular Jsonp請求數據

1、在app.module.ts中引入HttpClientModule, HttpClientJsonpModule並注入

import {HttpClientModule,HttpclientJsonpModule} from@angular/common/http';

imports:[
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]

2、在用到的地方引入httpClient並在構造函數聲明

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

3, post提交數據

var url="http://127.0.0.1:8080/doLogin";

this.http.jsonp(url,"callback").subscribe((response:any)=>{
  this.userList=response;
  console.log(response)
})

 

 

四、Angular中使用第三方模塊axios請求數據

1、安裝axios

cnpm install axios --save

2、用到的地方引入axios

import axios from 'axios";

3,get請求

var url= "http://127.0.0.1:8080/api/productlist";
axios.get(url)
    .then(function (response){
      console.log(response)
　　)}

 

五，在服務（service）中通過Promise封裝請求

get(api){ return new Promise((resolve, reject)=>{ this.http.get(api).subscribe( (response)=>{ resolve(response); }) }) }

 

在用到的組件中引入服務，然后調用方法

import { CommonService } from '../../services/common.service'; constructor(public common:CommonService) { } this.common.get(api).then((response)->{ console. log (response); })