Angular8 Http简单使用教程

来源：动视网责编：小采时间：2020-11-27 21:52:13

Angular8 Http简单使用教程

Angular8 Http简单使用教程: Http就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。先看一组常见的业务请求： this.http.post('http://127.0.0.1:8080/api/getList', { header: {

推荐度：

点击下载本文 文档为doc格式

导读Angular8 Http简单使用教程: Http就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。先看一组常见的业务请求： this.http.post('http://127.0.0.1:8080/api/getList', { header: {

Http就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。

先看一组常见的业务请求：

this.http.post('http://127.0.0.1:8080/api/getList', {
 header: {
 token: 'asdasdas'
 },
 observe: 'body',
 params: {
 pageSize: 10,
 pageIndex: 1
 },
 responseType: 'json',
 withCredentials: true
 });

可以看出有些配置是几乎所有请求都共通得，有的需要token等参数，一个项目全部手动写得话，第一容易漏写，第二以后如果有改动，需要所有接口都调整，不利于维护，最理想得状态就是只修改参数和api地址，其他得交给特别得机制去处理，这就引出了今天的主角-HttpInterceptor

定义

按照官方约定，文件应该是以‘.interceptor.ts'作为后缀

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 // 先补全请求协议
 let url = req.url;
 const needToken = ignoreToken.filter(u => url.match(u));
 if (url.indexOf('http://') < 0 || url.indexOf('https://') < 0) {
 url = 'http://' + url;
 }
 // 过滤掉不需要token的请求
 if (!needToken.length) {
 req = req.clone({
 url
 });
 } else {
 req = req.clone({
 url,
 headers: req.headers.set('token', 'asdqwe')
 });
 }
 return next.handle(req).pipe(
 tap(
 event => {
 if (event instanceof HttpResponse) {
 console.log(event);
 if (event.status >= 500) {
 // 跳转错误页面
 }
 }
 },
 error => {
 // token过期 服务器错误等处理
 })
 );
 }
}

组件：

getTemp() {
 this.http.post('172.16.10.161:3000/table', {
 params: {
 pageSize: 10,
 pageIndex: 1
 }
 }).subscribe(res => {
 console.log(res);
 });
 }

该实现的功能比较简单，但是结构算是完整的，和管道类似，想应用此需要注入在app模块，

在providers数组种添加

{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }

根据业务复杂度，其内容也随着复杂，通常管理下共通的配置，核心是处理各类异常，甚至错误码处理。

总结

以上所述是小编给大家介绍的Angular8 Http简单使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Angular8 Http简单使用教程

推荐度：

点击下载本文 文档为doc格式

标签：方法使用 http

热门焦点

Angular8 Http简单使用教程

Angular8 Http简单使用教程

Angular8 Http简单使用教程

最新推荐

猜你喜欢

热门推荐