一.Http易忽漏知识点
1.multipart/form-data与x-www-form-urlencoded区别
- multipart/form-data:既可以上传文件等二进制数据,也可以上传表单键值对,只是最后会转化为一条信息;
x-www-form-urlencoded:只能上传键值对,并且键值对都是间隔分开的。
2.Http调试工具
- Postman
- VSCode插件:RestClient
二.Angular HttpClient
1.HttpClient的使用
- 导入HttpClientModule
- 只在根模块中导入
- 整个应用只需导入一次,不要在其他模块导入,因为HttpClientModule导出了Http相关的Service
- 在构造中注入HttpClient
- get/post/put/delete方法对应于Http方法
- 这些方法是泛型的,可以直接把放回的JSON转换成对应类型
- 不规范的请求,使用request方法
- 返回的值是Observable
- 必须订阅,才会发送请求,否则不会发送
2.HttpClient使用常见问题
-
通常我们将res赋值给属相时都会因为类型不匹配而报错,正规解决方案
//在调用对应请求时通过泛型的方式声明返回的对象类型,如下 this.http.get<ModelType>('请求url');//通过泛型可以定义返回的类型
3.Http拦截器HttpInterceptor
-
HttpInterceptor作用是在http发送请求之前或接受响应之后进行拦截
-
在发送请求进行拦截的实例
//定义参数的Interceptor主要用来在发送请求直接给请求中添加内容 @Injectable() export class ParamInterceptor implements HttpInterceptor { // 参数1:请求 ; 参数2:下一步的处理 intercept(req: HttpRequest<any>, next: HttpHandler) { //对请求进行相关操作: 给请求的连接中添加参数 const modifiedReq = req.clone({ setParams:{code: environment.code}//在请求中添加参数code值是环境中的code值 }) return next.handle(req);//表示将处理完的请求交给下一步去处理 } } //在module里面注入 providers: [ { provide: HTTP_INTERCEPTORS,//声明用于多个对象的令牌 useClass: ParamInterceptor, multi: true // 由于一个令牌对多个,则需要给multi属性设为true } ]
-
拦截响应的实例
// 拦截响应的实例,如果是响应且状态码在200-300之间,则打印日志 @Injectable() export class NotificationInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler) { return next.handle(req).pipe( // import {tap} from 'rxjs/operators' tap是rxjs中的操作符 // HttpEvent是联合类型,是HttpSendEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T> 类型的并集(其中一个类型) tap((event: HttpEvent<any>)=> { if(event instanceof HttpResponse && event.status >= 200 && event.status <300) {//如果响应状态码是200-300之间,则打印日志 console.log('[打印日志]') } }) ); } } //在module里面注入 providers: [ { provide: HTTP_INTERCEPTORS,//声明用于多个对象的令牌 useClass: NotificationInterceptor, multi: true // 由于一个令牌对多个,则需要给multi属性设为true } ]
三.Rxjs入门
Rxjs - Reactive Extensions For JavaScript - 响应式编程类库。Rx要把事件变成流概念。
1.实例代码
-
html
<input type="text" #inputRef/>
-
typescript
export class ParentComponent implements OnInit { @ViewChild('inputRef', {static: true}) inputRef: ElementRef; constructor() {} ngOnInit() { fromEvent(this.inputRef.nativeElement, 'input') // 将input标签元素的input事件流转成数据流 .subscribe((ev:any)=>{ console.log(ev.target.value);//当input内容发生变化的时候,将输出元素中的内容 }); } handleClick() {} }
2.何谓响应式编程
- 随着事件流中的元素的变化随之做出相应的动作
3.Rxjs关键概念
- 流的种类:无限【无限输入都是有无限输出的】、有限【比如网络请求就是有限的】、单个、空【流没有发射任何元素,直接结束】
- 流的状态:next、error、complete
- 所有的操作都是异步的
4.Observable的三种状态
this.route.paramMap.subscribe(params=> {
//next区块
console.log('路径参数:', params);
this.selectedTabLink = params.get('tabLink');
this.cd.markForCheck();
},err => {
//错误处理区块
console.log(err);
},()=> {
// complete区块
// 无论错误还是最终结束,都会走到complete这里
});