首页 学习 前端知识学习 AngularJS

# 准备

ng new angulardemo10
ng g component components/news
ng g service services/httpservice
ng serve --open

# GET/POST 请求

  1. 根组件引入 HttpClientModule
import { HttpClientModule } from '@angular/common/http';
imports: [ HttpClientModule ]
  1. 新闻组件引入 HttpClient, HttpHeaders
import { HttpClient, HttpHeaders } from '@angular/common/http';
  public list:any[] = [];
  constructor(public http:HttpClient) { }
  getData(){
    console.log('执行get请求')
    this.http.get('http://a.itying.com/api/productlist').subscribe((res:any)=>{
      // RxJS
      console.log(res)
      this.list = res.result;
    })
  }
  postData(){
    console.log('执行post请求')
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let api = 'http://127.0.0.1:8079/data'
    this.http.post(api, {
      'name': 'user'
    }, httpOptions).subscribe((res)=>{
      console.log(res);
    })
  }
# jsonp 请求
  1. 根组件引入
import { HttpClientJsonpModule } from '@angular/common/http';
imports: [ HttpClientJsonpModule ]
  1. 新闻组件使用 jsonp
getJsonpData(){
    console.log('通过jsonp获取服务器端数据，跨域的一种解决方式')
    /**
     * jsonp 请求，服务器必须支持 jsonp，验证服务器支持 jsonp
     * http://a.itying.com/api/productlist?callback=xxx
     * http://a.itying.com/api/productlist?cb=xxx
     */
    let api = 'http://a.itying.com/api/productlist'
    this.http.jsonp(api, 'callback').subscribe((res)=>{
      console.log(res);
    })
  }
# axios 请求
  1. 创建 httpservice 服务并在根组件引入该服务
import { HttpserviceService } from './services/httpservice.service';
providers: [HttpserviceService],
  1. 服务里封装 axios 请求
import axios from 'axios'
  axiosGet(api:any){
    return new Promise((resolve, reject)=>{
      axios.get(api).then(function (response) {
        resolve(response)
      })
    })
  }
  1. 新闻组件里引入该服务并使用
import { HttpserviceService } from 'src/app/services/httpservice.service';
  constructor(public httpService:HttpserviceService) { }
  getAxiosData(){
    console.log('通过第三方模块获取服务器的数据')
    let api = 'http://a.itying.com/api/productlist'
    this.httpService.axiosGet(api).then((res)=>{
      console.log(res);
    })
  }
# 详细代码
# 根组件 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HttpserviceService } from './services/httpservice.service';
@NgModule({
  declarations: [
    AppComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [HttpserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }
# app.component.html
<app-news></app-news>
# news 组件
# news.component.html
<button (click)="getData()">Get请求数据</button>
<ul>
    <li *ngFor="let item of list">{{item.title}}</li>
</ul>
<button (click)="postData()">Post提交数据</button>
<button (click)="getJsonpData()">通过jsonp获取服务器端数据，跨域的一种解决方式</button>
<button (click)="getAxiosData()">通过第三方模块获取服务器的数据</button>
# news.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
// 使用服务里 axios 获取数据
import { HttpserviceService } from 'src/app/services/httpservice.service';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  public list:any[] = [];
  constructor(public http:HttpClient, public httpService:HttpserviceService) { }
  ngOnInit(): void {
  }
  getData(){
    console.log('执行get请求')
    this.http.get('http://a.itying.com/api/productlist').subscribe((res:any)=>{
      // RxJS
      console.log(res)
      this.list = res.result;
    })
  }
  postData(){
    console.log('执行post请求')
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let api = 'http://127.0.0.1:8079/data'
    this.http.post(api, {
      'name': 'user'
    }, httpOptions).subscribe((res)=>{
      console.log(res);
    })
  }
  getJsonpData(){
    console.log('通过jsonp获取服务器端数据，跨域的一种解决方式')
    /**
     * jsonp 请求，服务器必须支持 jsonp，验证服务器支持 jsonp
     * http://a.itying.com/api/productlist?callback=xxx
     * http://a.itying.com/api/productlist?cb=xxx
     */
    let api = 'http://a.itying.com/api/productlist'
    this.http.jsonp(api, 'callback').subscribe((res)=>{
      console.log(res);
    })
  }
  getAxiosData(){
    console.log('通过第三方模块获取服务器的数据')
    let api = 'http://a.itying.com/api/productlist'
    this.httpService.axiosGet(api).then((res)=>{
      console.log(res);
    })
  }
}
# httpservice 服务
# httpservice.service.ts
import { Injectable } from '@angular/core';
import axios from 'axios'
@Injectable({
  providedIn: 'root'
})
export class HttpserviceService {
  constructor() { }
  axiosGet(api:any){
    return new Promise((resolve, reject)=>{
      axios.get(api).then(function (response) {
        resolve(response)
      })
    })
  }
}