ค้นหาเว็บไซต์

angular - ดักจับคำขอ HTTP ทั้งหมดจาก angular2


ฉันกำลังมองหาวิธีที่จะดักจับคำขอ HTTP ทั้งหมดที่ทำโดย Angular และเพิ่ม headers บางส่วน ในการเปิดตัวก่อน angular2 RC5 (ก่อน NgModule) ก็เป็นแบบนั้น เช่น:

class MyOptions extends BaseRequestOptions {
    Authorization: string = 'Bearer ' + localStorage.getItem('tokenName');
}

bootstrap(AppComponent,
    [HTTP_PROVIDERS,
        { provide: RequestOptions, useClass: MyOptions },
    appRouterProviders,
    disableDeprecatedForms(),
    provideForms(),
]).catch(err => console.error(err));

ฉันกำลังอยู่ในเวอร์ชัน 2.0 final และจากการวิจัยเกี่ยวกับวิธีที่สิ่งนี้จะถูกนำไปใช้ในเวอร์ชันนี้จะมีความคล้ายคลึงกับสิ่งนี้:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [
    { provide: RequestOptions, useClass: MyOptions }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

@Injectable()
export class MyOptions extends RequestOptions {
  constructor() { super({method: RequestMethod.Get, headers: new Headers()}); }
}

มันแสดงข้อผิดพลาดดังต่อไปนี้: TypeError: ไม่สามารถอ่านสมบัติ 'merge' ของ null ดังที่เห็นในตัวอย่างนี้

หมายเหตุ: การใช้งานของ MyOptions เหมือนกับ BaseRequestOptions ที่คัดลอกมา เพราะถ้าคุณใช้ BaseRequestOptions ใน {Provide: RequestOptions, useClass: BaseRequestOptions} ทุกอย่างจะทำงานได้ ซึ่งสามารถดูได้จากตัวอย่างนี้

คำตอบ #1

ฉันเห็นข้อผิดพลาดสองข้อในโค้ดของคุณ

  • คุณไม่ได้นำเข้า RequestMethod

  • คุณต้องประกาศคลาสที่ขยายของคุณ MyOptions ก่อนตัวตกแต่ง NgModule

ด้วยวิธีนี้ การสาธิตของคุณจะดูเหมือน Plunker

คำตอบ #2

คุณอาจดูคำถามใน StackOverflow ด้านล่าง พวกเขาพูดถึงเรื่องนี้อย่างละเอียด

httpinterceptor ที่เทียบเท่าใน Angular2 คืออะไร?

ตัวดักจับใน Angular2