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

再次请求，请求数据成功：

总结

发现平时开发仍是太依赖先后台相互配合，不能作到彻底的先后台分离开发，此次参考别人的写法，学到了一手。