[武汉|结业弟子]JS-刘平|2019年10月16日的日报-技能树.IT修真院

发表于： 2019-10-16 19:23:20

1 848

今天完成的事情

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 api = "http://a.itying.com/api/productlist";
this.http.get(api).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 提交数据

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  var api = "http://127.0.0.1:3000/doLogin";
  this.http.post(api,{username:'张三',age:'20'},httpOptions).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";

constructor(public http:HttpClient) { }

3、jsonp 请求数据

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

今天遇到的问题

对angular中数据请求的原理还不够熟悉，对angular中各种命令的使用也不够熟练

今天的收获

了解了angular中数据是怎么进行交互的

明天的计划

继续学习angular中数据的交互

返回列表

【任务5】 [武汉|结业弟子]JS-刘平 | 2019年10月16日 的日报 下品

评论

分享到

【任务5】 [武汉|结业弟子]JS-刘平 | 2019年10月16日的日报下品