angular 请求本地json数据_angularjs

上一篇: IE 8 下 angular 动态生成的 sel... 下一篇:Angular中使用better-scroll

angular 请求本地json数据

发布时间：2019-06-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了angular 请求本地json数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

2. 请求数据
在check-record.service.ts文件中

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="getAll(): Observable {
   return this.http.get('assets/demo/data/checkRecord.json');
}" tITle="" data-original-title="复制">
      
      
getAll(): Observable<CheckRecord[]> {
   return this.http.get<CheckRecord[]>('assets/demo/data/checkRecord.json');
}
在check-record.component.ts文件中：

      
      
      rds = checkRecords;
        console.LOG(checkRecords);
    }, () => {
        console.log('network error');
    });
}" title="" data-original-title="复制">
      
      
// 获取检定记录
getAllCheckRecords(): void {
    this.checkRecordService.getAll().subscribe((checkRecords: CheckRecord[]) => {
        this.checkRecords = checkRecords;
        console.log(checkRecords);
    }, () => {
        console.log('network error');
    });
}
结果发现写完后，控制台报404

发现请求路径上多了'api'，于是就去改拦截器

      
      
      PRequest, next: HttpHandler): Observable> {
    // 如果请求的是本地资源，则不进行拦截
    if (req.url.slice(0, 6) !== 'assets') {
        const apiReq = req.clone({
            url: '/api' + req.url
        });
        return next.handle(apiReq);
    } else {
        return next.handle(req);
    }
}" title="" data-original-title="复制">
      
      
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);
    }
}
再次请求，请求数据成功：

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