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

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

总结

发现平时开发还是太依赖前后台相互配合，不能做到完全的前后台分离开发，这次参考别人的写法，学到了一手。