Angular权威教程之http篇

angular 专栏收录该内容
13 篇文章 0 订阅

在这里插入图片描述
在这里插入图片描述
众所周知,我却不知,JavaScript中,通常有三种处理异步代码的方式,所以我要记下来了:

  • 回调callback
  • 承诺promise
  • 可观察对象observable

而在angular中最常用的就是最后一个可观察对象(observable)。

首先使用@angular/http就要对其进行导入

ts文件中引入部分:

import {Http,Response,RequestOptions,Headers } from'@angular/http';
import { HttpModule } from '@angular/http'; 

在这里插入图片描述

get基本请求的流程

1.有一个调用makeRequest方法的button

<button type="button" (click)="makeRequest()">Make Request</button> 

将makeRequest方法绑定到button的click事件上

2.makeRequest方法会调用http库向API发起一个GET请求

makeRequest(): 
 void {     
 this.loading = true;     
 this.http.request('http://jsonplaceholder.typicode.com/posts/1')       
 .subscribe((res: Response) => {         
 this.data = res.json();         
 this.loading = false;       
 });   
 }

调用makeRequest方法时,首先将loading设置为true,即显示加载,在回读回Response时(订阅此时的变化),再将loading显示为false。

3.当请求返回时,使用返回结果中的数据更新this.data

 <div *ngIf="loading">loading...</div>   
 <pre>{{data | json}}</pre> 
{{data | json}}
这里使用了json管道。
在最后会对管道进行拓展

用json方法提取响应体并解析成一个Object,然后将是这个Object赋值给this.data.

构建一个控制器

在这里插入图片描述
因为之前已经定义了data和loading两个实例变量,所以我们在这个ts中,新建一个同名类,

export class SimpleHTTPComponent
{
data:Object;
loading:boolean;
}
constructor(http: Http) 
{     
this.http = http;      
}

post请求的基本流程

继续借用刚刚的makeRequest的方法:

 makePost(): void {     
 this.loading = true;     
 this.http.post(       
 'http://jsonplaceholder.typicode.com/posts',       
 JSON.stringify({         
 body: 'bar',         
 title: 'foo',         
 userId: 1       
 }))       
 .subscribe((res: Response) => {         
 this.data = res.json();         
 this.loading = false;       
 });   
 }

在这里插入图片描述
区域部分为post与get请求的异同,
JSON.stringify将Object转换为一个JSON字符串

其他请求 PUT/PATCH/DELETE/HEAD

方法调用类似get post

  • delete为例子:
 makeDelete(): void {     
 this.loading = true;
 this.http.delete('http://jsonplaceholder.typicode.com/posts/1')       
 .subscribe((res: Response) => {         
 this.data = res.json();         
 this.loading = false;       
 });   
 } 

关于RequestOptions

  makeHeaders(): void {     
  let headers: Headers = new Headers();     
  headers.append('X-API-TOKEN', 'ng-book'); 
  let opts: RequestOptions = new RequestOptions();     
  opts.headers = headers; 
  this.http.get('http://jsonplaceholder.typicode.com/posts/1', opts)       
  .subscribe((res: Response) => {         
  this.data = res.json();      
   });   
   }

append()-在每个匹配元素里面的末尾处插入参数内容

关于管道的拓展

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

在template的插值表达式中,让birthday通过管道操作符|流动到右侧的date管道函数中,注意,这是一个函数。

可以对管道进行参数化

在这里插入图片描述

  • 4
    点赞
  • 4
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值