angular数据交互 get jsonp post

主要介绍angular中get、post、jsonp、axios请求数据与服务器交互的使用方法。

get请求数据

在app.modules.ts中引入HttpClientModule模块并注入在imports里面

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// 数据请求模块
import { HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'

@NgModule({
  declarations: [
    AppComponent,
    NewsComponent,
    HomeComponent,
    FromComponent,
    SearchComponent,
    HeaderComponent,
    MainComponent,
    FatherComponent,
    ChildComponent,
    LifeCycleComponent,
    RxjsComponent,
    AxiosComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    // 声明请求函数
    BrowserModule,
    HttpClientModule,
    // 解决跨域
    HttpClientJsonpModule
  ],
  providers: [StorageService], // 配置服务
  bootstrap: [AppComponent]
})
export class AppModule { }

到需要发送请求的地方引入 HpptClient 并在构造函数中声明

import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-axios',
  templateUrl: './axios.component.html',
  styleUrls: ['./axios.component.scss']
})
export class AxiosComponent implements OnInit {

  constructor(public http:HttpClient) { }

  ngOnInit(): void {
  }

}

get请求、post提交数据

import { Component, OnInit } from '@angular/core';

// 引入必要方法
import { HttpClient, HttpHeaders } from '@angular/common/http'

@Component({
  selector: 'app-axios',
  templateUrl: './axios.component.html',
  styleUrls: ['./axios.component.scss']
})
export class AxiosComponent implements OnInit {

// 声明实例
  constructor(public http: HttpClient) { }

  ngOnInit(): void {
  }

  // get 请求数据
  getData() {
    let api = 'http://a.itying.com/api/producctlist'
    this.http.get(api).subscribe(res => {
      console.log(res)
    })
    console.log(666)
  }


// post 提交数据
  postData() {
    // post请求时需要设置请求头的类型
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    }
    let apidata = 'http://a.xxx.com/api/producctlist'
    this.http.post(apidata,{username:'zhangsan'},httpOptions).subscribe(res => {
      console.log(res)
    })
  }
}

jsonp解决跨域问题

import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-axios',
  templateUrl: './axios.component.html',
  styleUrls: ['./axios.component.scss']
})
export class AxiosComponent implements OnInit {

  constructor(public http: HttpClient) { }

  ngOnInit(): void {
  }
  jsonpData(){
    // jsonp 请求，服务器必须支持jsonp
    let api = 'http://a.xxx.com/api/producctlist'
    this.http.jsonp(api,"callback").subscribe(res => {
      console.log(res)
    })
    console.log(666)
  }
}

请求组件的代码

<p></p>
<br>
<button (click)="getData()">get请求数据</button>
<br><br><br><br>
<button (click)="postData()">post提交数据</button>
<br><br><br><br>
<button (click)="jsonpData()">jsonp处理跨域</button>

使用第三方模块axios实现数据请求

新建一个axios服务

ng g service services/http

安装axios

npm install axios --save

在services/http引入axios

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

// 引入axios

import axios from 'axios'

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

  constructor() { }
// post提交数据
  axiosPost(api:any){
    return new Promise((resolve,reject)=>{
      axios.post(api).then(res=>{
        resolve(res)
      })
    })
  }
}

app.modules.ts引入axios模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// 引入表单模块实现双向绑定
import {FormsModule} from "@angular/forms";

import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { FromComponent } from './components/from/from.component';
import { SearchComponent } from './components/search/search.component';

// 引入配置服务
import { StorageService } from './services/storage.service';
import { HeaderComponent } from './components/header/header.component';
import { MainComponent } from './components/main/main.component';
import { FatherComponent } from './components/father/father.component';
import { ChildComponent } from './components/child/child.component';
import { LifeCycleComponent } from './components/life-cycle/life-cycle.component';
import { RxjsComponent } from './components/rxjs/rxjs.component';
import { AxiosComponent } from './components/axios/axios.component';

// 数据请求模块
import { HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'

// 引入axios服务
import { HttpService } from '../../services/http.service';

@NgModule({
  declarations: [
    AppComponent,
    NewsComponent,
    HomeComponent,
    FromComponent,
    SearchComponent,
    HeaderComponent,
    MainComponent,
    FatherComponent,
    ChildComponent,
    LifeCycleComponent,
    RxjsComponent,
    AxiosComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    // 声明请求函数
    BrowserModule,
    HttpClientModule,
    // 解决跨域
    HttpClientJsonpModule
  ],
  providers: [StorageService,HttpService], // 配置服务
  bootstrap: [AppComponent]
})
export class AppModule { }

在组件中使用封装好了的axios

import { Component, OnInit } from '@angular/core';

// 引入axios服务获取数据

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

@Component({
  selector: 'app-axios',
  templateUrl: './axios.component.html',
  styleUrls: ['./axios.component.scss']
})
export class AxiosComponent implements OnInit {

  constructor(public public httpAxios:HttpService) { }

  ngOnInit(): void {
  }

  axiosData(){
    let api = 'http://a.xxx.com/api/producctlist'
    this.httpAxios.axiosGet(api).then(res=>{
      console.log(res)
    })
  }
}

上面给大家讲解了利用rxjs和axios分别获取获取和提交数据的方法，你看懂了么？