zoukankan      html  css  js  c++  java
  • 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);
       })
  • 相关阅读:
    设置了透明以后,会有严重残影
    “真正的工作不是说的天花乱坠”,Torvalds 说, “而是在于细节”(Torvalds 认为成功的项目都是99%的汗水和1%的创新)
    iOS和Android使用MQTT协议实现消息推送和即时通讯(替代XMPP,已经有TMS MQTT)
    avalonjs1.5 入门教程
    Grunt 之 Connect
    性能
    JQUERY省、市、县城市联动选择
    Meteor全栈开发平台
    微型工作流引擎设计
    微型工作流引擎-功能设计
  • 原文地址:https://www.cnblogs.com/zhulei2/p/13235366.html
Copyright © 2011-2022 走看看