angular从服务器获取数据

get方式未传参类型

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(public http: HttpClient) {}
}

//app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/internal/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public list: any;
  title = 'data';
  constructor(public http: HttpClient) {
    this.getData();
    console.log(this.list);
    // this.getBanners().subscribe((res: any) => {
    //   console.log(res);
    // });
  }
  getData() {
    this.http
      .get('http://a.itying.com/api/productlist')
      .subscribe((res: any) => {
        console.log(res);
        this.list = res;
      });
  }
  // getBanners(): Observable<any> {
  //   return this.http
  //     .get('http://localhost:3000/banner')
  //     .pipe(map((res: any) => res.banners));
  // }
}

get方式加传参类型

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(public http: HttpClient) {}
}

//app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/internal/operators';
import queryString from 'query-string';
//定义传参数据格式
type SingerParams = {
    offset: number;
  limit: number;
  cat?: string;
}
//定义默认展示情况下需要传入的数据
const defaultParams: SingerParams = {
    offset: 0,
  limit: 9,
  cat?: '5001'
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public list: any;
  title = 'data';
  constructor(public http: HttpClient) {
     this.getBanners().subscribe((res: any) => {
       console.log(res);
     });
  }
   getBanners(args: SingerParams = defaultParams): Observable<any> {
     const params = new HttpParams({fromString: queryString.stringify(args)})
     return this.http
       .get('http://localhost:3000/artist/list', { params })
       .pipe(map((res: any) => res.artists));
   }
}

单个参数还可以使用set传值

getSongSheetDetail(id: number): Observable<SongSheet> {
    const params = new HttpParams().set('id', id.toString());
    return this.http.get(this.uri + 'playlist/detail', { params })
    .pipe(map((res: { playlist: SongSheet }) => res.playlist));
  }

get传参同样可以使用问号拼接参数的方式

getData() {
    this.http
      .get('http://www.liulongbin.top:3006/api/getbooks?id=1')
      .subscribe((res: any) => {
        console.log(res);
        this.list = res;
      });
  }

post提交数据

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

//在app.module.ts中引入HttpClientModule注入
import {HttpClientModule} from '@angular/common/http'
imports:[
    BrowserModule,
    HttpClientModule
]

//在用到的地方引入HttpClient、HttpHeaders并在构造函数声明HttpClient
import {HttpClient, HttpHeaders} from "@angular/common/http";
constructor(public http:Httpclient) {}
//post提交数据
var url="http://127.0.0.1:8080/doLogin";
this.http.post(url, {"age":22,"username":"zl"})
  .subscribe((response)=>{
    console.log(response)
  })

Jsonp请求数据

//在app.module.ts中引入HttpClientModule, HttpClientJsonpModule并注入
import {HttpClientModule,HttpclientJsonpModule} from@angular/common/http';
imports:[
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]

//在用到的地方引入httpClient并在构造函数声明
import {HttpClient} from "@angular/common/http";
//发送请求
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请求数据

//安装axios
cnpm install axios --save
//用到的地方引入axios
import axios from 'axios";
//get请求
var url= "http://127.0.0.1:8080/api/productlist";
axios.get(url)
    .then(function (response){
      console.log(response)
　　)}

在服务（service）中通过Promise封装请求

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

//在用到的组件中引入服务，然后调用方法
import { CommonService } from '../../services/common.service';
constructor(public common:CommonService) { }
this.common.get(api).then((response)->{
     console. log (response);
   })