内容简介:本周写一个前台模块时,发现需要的数据依赖其他模块的支持,但其他模块暂时还不能用,所以需要手动添加模拟数据,然后参考模板demo,发现很有意思的写法,于是就拿来借鉴了。在assets/demo/data目录下创建checkRecord.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);
}
}
再次请求,请求数据成功:
总结
发现平时开发还是太依赖前后台相互配合,不能做到完全的前后台分离开发,这次参考别人的写法,学到了一手。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- gin请求数据校验
- fetch 如何请求数据
- 利用Jsonp跨域请求数据(原生和Jquery的ajax请求),简单易懂!
- 原生JS发送异步数据请求
- vue开发 请求本地JSON数据
- vue-axios请求数据(十二)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML 5实战
陶国荣 / 机械工业出版社 / 2011-11 / 59.00元
陶国荣编著的《HTML5实战》是一本系统而全面的HTML 5教程,根据HTML 5标准的最新草案,系统地对HTML 5的所有重要知识点进行了全面的讲解。在写作方式上,本书以一种开创性的方式使理论与实践达到极好的平衡,不仅对理论知识进行了清晰而透彻的阐述,而且根据读者理解这些知识的需要,精心设计了106个完整(每个案例分为功能描述、实现代码、效果展示和代码分析4个部分)的实战案例,旨在帮助读者通过实......一起来看看 《HTML 5实战》 这本书的介绍吧!