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這裏
});