如何從 Angular 服務類返回示例 json 數據作為響應

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