Question

我正在尝试通过使用模拟数据集来模仿API调用。但是我想在我的项目中使用一种现有的方法来获取数据。

这是我的代码

接口

export interface DefaultEmployeePortfolio {
    id: string;
    category: string;
    value: string;
}

提供服务

getDefautltEmployeePortfolio(): Observable<DefaultEmployeePortfolio[]> {
    const token = this._storeService.getStoredData().id_token;
    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
    const options = { headers: headers };
    const data = [
      {id: 1, category: 'Risk Rating', value: 'Aggressive'},
      {id: 2, category: 'Portfolio Management', value: 'Active'}
    ];
    return this._http.get<DefaultEmployeePortfolio[]>(data, options);
}

TS文件

this._offerService.getDefautltEmployeePortfolio().subscribe((resp) => {
    console.log(resp);
})

我需要怎么做才能将数据从服务中获取到组件（.ts）中？

Answer 1

伪造端点以返回模拟数据：

getDefautltEmployeePortfolio(): Observable<DefaultEmployeePortfolio[]> {

  const data: any = [
      {id: 1, category: 'Risk Rating', value: 'Aggressive'},
      {id: 2, category: 'Portfolio Management', value: 'Active'}
    ]
  return Observable.create((observer: any) => {
          setTimeout(() => {
            observer.next(data);
          }, 1000);
        });
      }

Answer 2

如果您想轻松地从模拟数据转换为真实数据，那么创建可模拟json是最好的方法。另一种方法是使用模拟数据创建可观察对象，但这只会添加不必要的逻辑，一旦您插入真实数据（来自API），就必须将其删除。

在您的mock.json文件夹中创建一个assets文件，然后在您的http.get中引用它

服务

getDefautltEmployeePortfolio(): Observable<DefaultEmployeePortfolio[]> {
    const token = this._storeService.getStoredData().id_token;
    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
    const options = { headers: headers };
    return this._http.get<DefaultEmployeePortfolio[]>('./assets/mock.json', options);
}

mock.json

[
  {"id": 1, "category": "Risk Rating", "value": "Aggressive"},
  {"id": 2, "category": "Portfolio Management", "value": "Active"}
]

返回Angular中的模拟数据集

2 个答案: