angular中的数据交互

1.get请求

1. 在app.module.ts中引入HttpClientModule（@angular/common/http），并注入到imports中。

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

  imports: [
    HttpClientModule,
  ],

2. 在用到的组件中引入HttpClient，并注入到组件的构造函数中。

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

constructor(
    public http: HttpClient
  ) { }

3. 在组件中使用

  getData() {
    let api = 'http://a.itying.com/api/productlist';
    this.http.get(api).subscribe(
      (response: any)=> {
        console.log(response);
        this.list = response.result;
      })
  }

2.post请求

1. 在app.module.ts中引入HttpClientModule（@angular/common/http），并注入到imports中。

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

  imports: [
    HttpClientModule,
  ],

2. 在用到的组件中引入HttpClient，并注入到组件的构造函数中。

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

constructor(
    public http: HttpClient
  ) { }

3. 在组件中使用

doLogin() {
    const httpOptions = { headers: new HttpHeaders({ 'content-type': 'application/json' }) };
    var api = 'http://127.0.0.1';
    this.http.post(api, { 'username': '张三', 'age': 20 }, httpOptions).subscribe((response) => {
      console.log(response);
    })
  }

3.jsonp请求

1. 在app.module.ts中引入HttpClientModule 和 HttpClientJsonpModule（@angular/common/http），并注入到imports中。

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

  imports: [
    HttpClientModule,
    HttpClientJsonpModule
  ],

2. 在用到的组件中引入HttpClient，并注入到组件的构造函数中。

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

constructor(
    public http: HttpClient
  ) { }

3. 在组件中使用

getDataByJson() {
    console.log(111);
    let api = 'http://a.itying.com/api/productlist';
    this.http.jsonp(api, 'callback').subscribe(response => console.log(response));
  }

4. 注意：在使用前需要验证服务器是否支持jsonp，验证方式为在地址末尾拼接?callback=xxx，看能否返回数据。

4. 第三方模块axios

1. 安装npm install axios
2. 此处把axios封装了，所以引入到http.services.ts中。如果不封装，就哪里用，哪里引。

import axios from 'axios';

3. 在http.services.ts文件中封装axios。

import { Injectable } from '@angular/core';
import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor() { }
  axiosGet(api: string) {
    return new Promise((resolve, reject) => {
      axios.get(api).then(res => console.log(res)).catch(res => console.log(res))
    })
  }
}

4. 把封装后的文件引入到app.module.ts中，同时在provider中声明。

import { HttpService } from './serveices/http.service';

providers: [HttpService],

5. 在哪个组件中用到这个服务，就在哪个组件中引用，并且在构造函数中进行注入。

import { HttpService } from 'src/app/serveices/http.service';

constructor(
    public httpService: HttpService
  ) { }

6. 在组件中使用

 getDataByAxios() {
    let api = 'http://a.itying.com/api/productlist';
    this.httpService.axiosGet(api).then(data => {
      console.log(data);
    })
  }

5. 完整文件

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { HttpClientJsonpModule } from '@angular/common/http'
import { NewsComponent } from './components/news/news.component';
import { HttpService } from './serveices/http.service';
@NgModule({
  declarations: [
    AppComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
  
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

news.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpService } from 'src/app/serveices/http.service';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  public list: any[]=[];
  constructor(
    public http: HttpClient,
    public httpService: HttpService
  ) { }

  ngOnInit(): void {
  }
  
  getData() {
    let api = 'http://a.itying.com/api/productlist';
    this.http.get(api).subscribe(
      (response: any)=> {
        console.log(response);
        this.list = response.result;
      })
  }

  doLogin() {
    const httpOptions = { headers: new HttpHeaders({ 'content-type': 'application/json' }) };
    var api = 'http://127.0.0.1';
    this.http.post(api, { 'username': '张三', 'age': 20 }, httpOptions).subscribe((response) => {
      console.log(response);
    })
  }

  getDataByJson() {
    console.log(111);
    let api = 'http://a.itying.com/api/productlist';
    this.http.jsonp(api, 'callback').subscribe(response => console.log(response));
  }
  
  getDataByAxios() {
    let api = 'http://a.itying.com/api/productlist';
    this.httpService.axiosGet(api).then(data => {
      console.log(data);
    })
  }
}

news.component.html

<button (click)="getData()">get方法获取数据</button>
<br>
<button (click)="doLogin()">post方法请求数据</button>
<br>
<button (click)="getDataByJson()">通过jsonp方式解决跨域</button>
<br>
<button (click)="getDataByAxios()">通过第三方模块获取服务器数据</button>
<br><br><br>
<ul>
  <li *ngFor="let item of list">{{item.title}}</li>
</ul>

http.service.ts

import { Injectable } from '@angular/core';
import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor() { }
  axiosGet(api: string) {
    return new Promise((resolve, reject) => {
      axios.get(api).then(res => console.log(res)).catch(res => console.log(res))
    })
  }
}