Angular4 数据请求 POST、GET

创建项目

ng new OBJECT_NAME

创建一个名为 httpRequest  的服务

ng generate service httpRequest

在app.module.ts 里面添加

[html]

  1. providers : [HttpRequestService]

HttpRequestService.ts 文件

[javascript]

  1. import { Injectable, OnInit } from '@angular/core';
  2. import { HttpClient, HttpHeaders } from '@angular/common/http';
  3. @Injectable()
  4. export class HttpRequestService {
  5.   httpOptions = {
  6.     headers: new HttpHeaders({ 'Content-Type''application/json;application/x-www-form-urlencodeed; charset=utf-8'})
  7.   };
  8.   constructor(private httpClient : HttpClient) { }
  9.   httpPost(reqUrl : string, reqBody, comp, flag) {
  10.     //后台接收数据 需要 @RequestBody 标签
  11.     this.httpClient.post(reqUrl, reqBody, this.httpOptions)
  12.     .subscribe(
  13.       val => {
  14.         console.log('post请求成功', val);
  15.         if(val['success']){
  16.           comp.postOk(val, flag);
  17.         }else{
  18.           comp.postErr(val, flag);
  19.         }
  20.       },
  21.       error => {
  22.         console.log('post请求失败', error);
  23.         comp.postErr(error, flag);
  24.       }
  25.     );
  26.   }
  27.   httpGet(reqUrl, comp, flag){
  28.     this.httpClient.get(reqUrl, this.httpOptions)
  29.     .subscribe(
  30.       val => {
  31.         console.log('get请求成功', val);
  32.         if(val['success']){
  33.           comp.getOk(val, flag);
  34.         }else{
  35.           comp.getErr(val, flag);
  36.         }
  37.       },
  38.       error => {
  39.         console.log('get请求失败', error);
  40.         comp.getErr(error, flag);
  41.       }
  42.     );
  43.   }
  44.   show() : string {
  45.     return '我是 HttpRequestService 调用我干嘛';
  46.   }
  47. }

创建一个名为 sku-from 的组件

ng g component sku-from

sku-form.component.html 文件

[html]

  1. <div>
  2.   sku-form works!
  3.   <form #skuForm="ngForm" (ngSubmit)="onSubmit(skuForm)">
  4.     <div class="form-group">
  5.       <label for="name">货品代码</label>
  6.       <input type="text" class="form-control" [(ngModel)]="skuInfo.sku" name="sku" required minlength="4" />
  7.     </div>
  8.     <div class="form-group">
  9.       <label for="alterEgo">货品描述</label>
  10.       <input type="text" class="form-control" [(ngModel)]="skuInfo.descr" name="descr" required />
  11.     </div>
  12.     <br/>
  13.     <button type="button" nz-button [nzType]="'dashed'" (click)="newSku()">new sku</button>
  14.     <button type="submit" nz-button [nzType]="'primary'">Submit</button>
  15.   </form>
  16. </div>

[javascript]

  1. sku-form.component.ts文件

[javascript]

  1. import { Component, OnInit } from '@angular/core';
  2. import { FormGroup, FormControl, Validators }   from '@angular/forms';
  3. import {HttpRequestService} from '../httpRequest.service'
  4. import {Sku} from './../sku';
  5. @Component({
  6.   selector: 'app-sku-form',
  7.   templateUrl: './sku-form.component.html',
  8.   styleUrls: ['./sku-form.component.css']
  9. })
  10. export class SkuFormComponent implements OnInit {
  11.   private api_sku_save = 'http://localhost:8081/sino-web/bas/sku/saveDetails';
  12.   private skuInfo : Sku = new Sku(1, '0000000000010''红牛'new Date());
  13.   private skuForm : FormGroup;
  14.   reqsuccess : boolean;
  15.   reqsuccessMsg : string;
  16.   constructor(private httpRequestService : HttpRequestService) {
  17.     this.createForm();
  18.    }
  19.   ngOnInit() { }
  20.   createForm(){
  21.     this.skuForm = new FormGroup({
  22.       sku : new FormControl(this.skuInfo.sku, Validators.minLength(7)),
  23.       descr : new FormControl(this.skuInfo.descr, Validators.required)
  24.     });
  25.   }
  26.   newSku(){
  27.     this.skuInfo = new Sku(null''''null);
  28.   }
  29.   onSubmit(formData) {
  30. /** 
  31.          * valid:是否有效、 invalid:无效、dirty:脏\status:状态、errors:显示错误
  32.          */
  33.     if(formData.form.valid){
  34.       this.httpRequestService.httpPost(this.api_sku_save, this.skuInfo, this'save');
  35.     }
  36.   }
  37.   postOk (val, flag){
  38.     this.reqsuccess = true;
  39.     this.reqsuccessMsg = '';
  40.   }
  41.   postErr (val, flag){
  42.     this.reqsuccess = false;
  43.     this.reqsuccessMsg = val['msg'];
  44.     console.log(val);
  45.   }
  46. }

创建一个名为 sku的类

ng g generate class Sku

sku.ts文件

[javascript]

  1. export class Sku {
  2.     constructor(
  3.         public id : number,
  4.         public sku : string,
  5.         public descr : string,
  6.         public createdAt : Date
  7.     ){}
  8. }

作者:戴子

来源:https://blog.csdn.net/dailuwen/article/details/79375980


如果给你带来帮助,欢迎微信或支付宝扫一扫,赞一下。
 

关于 “Angular4 数据请求 POST、GET” 的 1 个意见

  1. 实际测试报httpClient, httphander等错,使用HttpClientModule解决
    @NgModule({
    imports: [BrowserModule, HttpClientModule, ...],
    })

评论关闭。