angular 请求本地json数据

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:本周写一个前台模块时,发现需要的数据依赖其他模块的支持,但其他模块暂时还不能用,所以需要手动添加模拟数据,然后参考模板demo,发现很有意思的写法,于是就拿来借鉴了。在assets/demo/data目录下创建checkRecord.json文件,如图添加数据:

本周写一个前台模块时,发现需要的数据依赖其他模块的支持,但其他模块暂时还不能用,所以需要手动添加模拟数据,然后参考模板demo,发现很有意思的写法,于是就拿来借鉴了。

1. 添加json测试数据

在assets/demo/data目录下创建checkRecord.json文件,如图添加数据:

angular 请求本地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

angular 请求本地json数据

发现请求路径上多了'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);
    }
}

再次请求,请求数据成功:

angular 请求本地json数据

总结

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷钢铁侠

硅谷钢铁侠

[美] 阿什利·万斯 / 周恒星 / 中信出版集团 / 2016-4 / 68.00元

◎全球首部埃隆•马斯克授权著作!了解埃隆•马斯克最全面、最真实、最经典读本 ◎创业者必读。首次披露马斯克如何建立和运营PayPal、特斯拉、Space X、Solar City等公司的细节。 ◎创新者必读。关于科技、梦想、创业、工作、团队、人生。马斯克首次公开创新的秘密。 ◎故事迷必读。硅谷最优秀科技作家阿什利•万斯历时将近4年,遍访300余人,写就记录马斯克传奇人生的经典著作。......一起来看看 《硅谷钢铁侠》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具