angular-请求本地json数据

jiezi

5 年前

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

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

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

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

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

angular-请求本地json数据

1. 添加 json 测试数据

2. 请求数据

总结