Angular&Http联调

一.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这里
});