Question

我有一种从端点获取数据的方法

  getManufacturers(): Observable<Manufacturers> {
    const requestBody = { 'num': 12 };

    return this.http.post<Manufacturers>(manufacturersUrl, requestBody).pipe(
      catchError(this.httpErrorService.handleError<Manufacturers>(`getManufacturers`))
    );
   }

端点未准备好。我想存入伪数据，例如：

if(manufacturersUrl === 'dummy-data') {
  return dummyData
}

两个问题-1.如何包装这些数据？ BehaviorSubject.asObserver？ 2.有没有那么破坏性的方法可以做到这一点？即，我可以更改结果而不必以更优雅的方式更改代码吗？

Answer 1

您只需返回数据

if(manufacturersUrl === 'dummy-data') {
  return of(dummyData)
}

Answer 2

使用angular的InMemoryWebApi。在内存数据服务中添加伪数据。使用此功能的好处是，在实际的API准备好后，您无需更改太多代码（只需更改URL）即可。

在应用程序模块中的HttpClientInMemoryWebApiModule之后导入HttpClientModule，以便它可以接收HTTP请求。

@NgModule({
  imports:      [ 
    ...
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService,
    {
      dataEncapsulation: false,
      passThruUnknownUrl: true
    }),
    ...
  ],
  ...
})

您的内存中数据服务将类似于：

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
    return {heroes};
  }
}

您的请求将如下：

constructor(private http: HttpClient) { }

getHeroes() {
  return this.http.get('api/heroes') // you just need to change this URL, once your API is ready
}

请参见以下示例：https://stackblitz.com/edit/angular-in-memory-untested-incomplete-mdvl5h?file=src%2Fapp%2Fhero.service.ts

修改

要调试请求，请在responseInterceptor类中添加一个InMemoryDataService。

  responseInterceptor(res: ResponseOptions, ri: RequestInfo) {
      console.log(`response`, res);
      console.log(`request`, ri)
      return res
  }

检查此链接：https://stackblitz.com/edit/angular-in-memory-untested-incomplete-fixlad?file=src%2Fapp%2Fin-memory-data.service.ts

在开发期间将虚拟数据存入http发布

2 个答案: