angular 請求本地json數據

本週寫一個前臺模塊時，發現須要的數據依賴其餘模塊的支持，但其餘模塊暫時還不能用，因此須要手動添加模擬數據，而後參考模板demo，發現頗有意思的寫法，因而就拿來借鑑了。

1. 添加json測試數據

在assets/demo/data目錄下建立checkRecord.json文件，如圖添加數據：

2. 請求數據

在check-record.service.ts文件中

getAll(): Observable<CheckRecord[]> {
   return this.http.get<CheckRecord[]>('assets/demo/data/checkRecord.json');
}

在check-record.component.ts文件中：

// 獲取檢定記錄
getAllCheckRecords(): void {
    this.checkRecordService.getAll().subscribe((checkRecords: CheckRecord[]) => {
        this.checkRecords = checkRecords;
        console.log(checkRecords);
    }, () => {
        console.log('network error');
    });
}

結果發現寫完後，控制檯報404

發現請求路徑上多了'api'，因而就去改攔截器

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 若是請求的是本地資源，則不進行攔截
    if (req.url.slice(0, 6) !== 'assets') {
        const apiReq = req.clone({
            url: '/api' + req.url
        });
        return next.handle(apiReq);
    } else {
        return next.handle(req);
    }
}

再次請求，請求數據成功：

總結

發現平時開發仍是太依賴先後臺相互配合，不能作到徹底的先後臺分離開發，此次參考別人的寫法，學到了一手。