共计 850 个字符,预计需要花费 3 分钟才能阅读完成。
本周写一个前台模块时,发现需要的数据依赖其他模块的支持,但其他模块暂时还不能用,所以需要手动添加模拟数据,然后参考模板 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);
}
}
再次请求,请求数据成功:
总结
发现平时开发还是太依赖前后台相互配合,不能做到完全的前后台分离开发,这次参考别人的写法,学到了一手。
正文完