angular - 如何返回示例 json 数据以响应 Angular 服务类

Question

如何返回示例 json 数据作为响应而不是调用实际的 API。我想在不实际调用后端 API 的情况下测试我的 UI 代码。我有从 UAT 捕获的响应数据我已将其添加到我的服务中并将 json 文件放在同一文件夹中。

     getdata(): Observable<any>{
return this.http.get<any>('keyinfoResponse.json')
.pipe(map((data)=>data),catchError((error)=>throwError(error)));

在组件中

this.dataService.getdata().subscribe((response) => {
     
      this.keyInfoResponse = response;
    }, (error) => {
      this.hasErrorOccurred = true;      
      if (error.message) {
        this.errorMessage = error.message;
      }       
    });
  }

响应未定义。

Answer 1

要使用 HttpClient 访问本地 .json 文件，文件的位置必须包含在 angular.json 文件的 assets 属性中。默认情况下(在大多数情况下)，src/assets 文件夹已经包含在内。

angular.json

{
  ...
  "projects": {
    "site": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "src/assets"
            ],

所以要么需要将 .json 文件放在 src/assets 文件夹中，或者如果没有，将它们的源文件夹路径添加到 assets 属性中。

文件夹结构

src
├── app
├── assets
│   ├── keyinfoResponse.json
├── angular.json
├── index.html
...

然后你可以像下面这样使用 HttpClient 访问它们

getdata(): Observable<any> {
  return this.http.get<any>('assets/keyinfoResponse.json').pipe(
    map((data) => data),
    catchError((error) => throwError(error))
  );
}