{"id":22728,"date":"2019-08-23T10:00:37","date_gmt":"2019-08-23T01:00:37","guid":{"rendered":"https:\/\/www.techscore.com\/blog\/?p=22728"},"modified":"2019-08-22T12:07:07","modified_gmt":"2019-08-22T03:07:07","slug":"angular-in-memory-web-api-%e3%81%af%e3%81%a9%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e4%bb%95%e7%b5%84%e3%81%bf%e3%81%a7%e5%8b%95%e4%bd%9c%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%81%8b","status":"publish","type":"post","link":"https:\/\/www.techscore.com\/blog\/2019\/08\/23\/angular-in-memory-web-api-%e3%81%af%e3%81%a9%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e4%bb%95%e7%b5%84%e3%81%bf%e3%81%a7%e5%8b%95%e4%bd%9c%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%81%8b\/","title":{"rendered":"Angular in-memory-web-api \u306f\u3069\u306e\u3088\u3046\u306a\u4ed5\u7d44\u307f\u3067\u52d5\u4f5c\u3057\u3066\u3044\u308b\u304b"},"content":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001\u767d\u5ddd\u3067\u3059\u3002<\/p>\n<p>\u6700\u8fd1\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3060\u3051\u3067\u306a\u304f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3082\u62c5\u5f53\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u3001<a href=\"https:\/\/angular.io\/\">Angular<\/a> \u3092\u89e6\u308b\u6a5f\u4f1a\u304c\u5897\u3048\u3066\u3044\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f Angular \u306e\u52c9\u5f37\u304c\u3066\u3089\u3001<a href=\"https:\/\/github.com\/angular\/in-memory-web-api\">Angular in-memory-web-api<\/a> \u304c\u3069\u306e\u3088\u3046\u306a\u4ed5\u7d44\u307f\u3067\u52d5\u4f5c\u3057\u3066\u3044\u308b\u304b\u3092\u898b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h2>Angular in-memory-web-api \u3068\u306f<\/h2>\n<p>Angular in-memory-web-api \u306f\u3001REST API \u306b\u3088\u308b CRUD \u64cd\u4f5c\u3092\u30a8\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b\u30a4\u30f3\u30e1\u30e2\u30ea\u306e Web API \u3067\u3059\u3002<br \/>\n\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u304c\u5b8c\u6210\u3057\u3066\u3044\u306a\u304f\u3066\u3082\u3001CRUD \u30c7\u30fc\u30bf\u306e\u6c38\u7d9a\u5316\u64cd\u4f5c\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3066\u304f\u308c\u308b\u305f\u3081\u3001Angular \u30a2\u30d7\u30ea\u306e\u958b\u767a\u6642\u3084\u30c6\u30b9\u30c8\u6642\u306b Web API \u30e2\u30c3\u30af\u3068\u3057\u3066\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>Angular in-memory-web-api \u306e\u4f7f\u3044\u65b9\u3067\u3059\u304c\u3001<br \/>\n\u307e\u305a\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067 Web API \u306e\u30e2\u30c3\u30af\u3068\u3057\u3066\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u30c7\u30fc\u30bf\u7b49\u3092\u5b9a\u7fa9\u3059\u308b\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\u30b5\u30fc\u30d3\u30b9\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n<pre>\nimport { InMemoryDbService } from 'angular-in-memory-web-api';\n\nexport class InMemHeroService implements InMemoryDbService {\n  createDb() {\n    let heroes = [\n      { id: 1, name: 'Windstorm' },\n      { id: 2, name: 'Bombasto' },\n      { id: 3, name: 'Magneta' },\n      { id: 4, name: 'Tornado' }\n    ];\n    return {heroes};\n  }\n}\n<\/pre>\n<p>\u305d\u3057\u3066\u3001Angular in-memory-web-api \u304c\u7528\u610f\u3057\u305f <code>HttpClientInMemoryWebApiModule<\/code> \u306b\u4e0a\u8a18\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\u30b5\u30fc\u30d3\u30b9\u3092\u767b\u9332\u3057\u3001<br \/>\n\u30e2\u30c3\u30af\u30b5\u30fc\u30d0\u3068\u3057\u3066\u52d5\u4f5c\u3055\u305b\u308b\u305f\u3081\u306b\u3001<code>AppModule<\/code> \u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<br \/>\n(<code>AppModule<\/code> \u306f\u3001Angular \u30a2\u30d7\u30ea\u304c\u8d77\u52d5\u3059\u308b\u3068\u304d\u306b\u3001\u6700\u521d\u306b\u7acb\u3061\u4e0a\u304c\u308b\u30eb\u30fc\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u3053\u3068\u3067\u3059\u3002)<br \/>\n\u3053\u306e\u6642\u3001<code>HttpClientInMemoryWebApiModule<\/code> \u306f <code>HttpClientModule<\/code> \u3088\u308a\u5f8c\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u3053\u306e\u7406\u7531\u306f\u5f8c\u8ff0\u3057\u307e\u3059\u3002<\/p>\n<pre>\nimport { HttpClientModule } from '@angular\/common\/http';\nimport { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';\n\nimport { InMemHeroService } from '..\/app\/hero.service';\n\n@NgModule({\n imports: [\n   HttpClientModule,\n   HttpClientInMemoryWebApiModule.forRoot(InMemHeroService),\n   ...\n ],\n ...\n})\nexport class AppModule { ... }\n<\/pre>\n<p>\u4e0a\u8a18\u306e\u8a2d\u5b9a\u3092\u3059\u308b\u3060\u3051\u3067\u3001<code>HttpClient<\/code> \u7d4c\u7531\u3067\u30e2\u30c3\u30af\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<br \/>\n( <code>HttpClient<\/code> \u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306e\u30b7\u30f3\u30d7\u30eb\u306a\u30af\u30e9\u30a4\u30a2\u30f3\u30c8 HTTP API \u3092\u63d0\u4f9b\u3059\u308b\u30af\u30e9\u30b9\u3067\u3059\u3002)<\/p>\n<pre>\n@Injectable()\nexport class HttpClientHeroService {\n\n  constructor (private http: HttpClient) {\n    super();\n  }\n\n  getHeroes (): Observable<Hero[]> {\n    return this.http.get<Hero[]>('api\/heroes').pipe(\n      \/**\n       * console.log\n       * [\n       *   { id: 1, name: 'Windstorm' },\n       *   { id: 2, name: 'Bombasto' },\n       *   { id: 3, name: 'Magneta' },\n       *   { id: 4, name: 'Tornado' }\n       * ]\n       *\/\n      tap(data => console.log(data)),\n      catchError(this.handleError)\n    );\n  }\n<\/pre>\n<p>\u3067\u306f\u3001\u5c11\u3057 Angular \u306e\u5185\u90e8\u306b\u5165\u3063\u3066\u898b\u3066\u3044\u304f\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n<h2>HttpClientModule \u3068 Angular \u306e\u4f9d\u5b58\u6027\u6ce8\u5165(DI)<\/h2>\n<p>Angular \u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u306f\u3001Angular \u30a2\u30d7\u30ea\u3092\u69cb\u6210\u3059\u308b\u90e8\u54c1\u3092\u307e\u3068\u3081\u3066\u304a\u304f\u4ed5\u7d44\u307f\u306e\u3053\u3068\u3067\u3001<br \/>\nAngular \u3082\u8907\u6570\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u304b\u3089\u69cb\u6210\u3055\u308c\u3066\u304a\u308a\u3001\u30a2\u30d7\u30ea\u306b\u5fc5\u8981\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u5229\u7528\u3057\u307e\u3059\u3002<br \/>\n( Angular \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u8a73\u7d30\u306f<a href=\"https:\/\/angular.jp\/guide\/architecture-modules\">\u3053\u3061\u3089<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002)<\/p>\n<p>Angular in-memory-web-api \u3092\u5229\u7528\u3059\u308b\u305f\u3081\u3001<br \/>\nAngular \u306e\u30eb\u30fc\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3042\u308b <code>AppModule<\/code> \u306b <code>HttpClientModule<\/code> \u3068\u3001<code>HttpClientInMemoryWebApiModule<\/code> \u3092\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<pre>\n@NgModule({\n imports: [\n   HttpClientModule,\n   HttpClientInMemoryWebApiModule.forRoot(InMemHeroService),\n   ...\n ],\n ...\n})\nexport class AppModule { ... }\n<\/pre>\n<p>\u307e\u305a\u3001<code>HttpClientModule<\/code> \u306e\u4e2d\u8eab\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\u3053\u3053\u3067 <code>providers<\/code> \u306b\u6ce8\u76ee\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n<code>providers<\/code> \u306e\u4e2d\u306b\u8907\u6570\u306e\u8a2d\u5b9a\u304c\u898b\u3089\u308c\u307e\u3059\u306d\u3002<\/p>\n<pre>\n\/**\n * Configures the [dependency injector](guide\/glossary#injector) for `HttpClient`\n * with supporting services for XSRF. Automatically imported by `HttpClientModule`.\n *\n * You can add interceptors to the chain behind `HttpClient` by binding them to the\n * multiprovider for built-in [DI token](guide\/glossary#di-token) `HTTP_INTERCEPTORS`.\n *\n * @publicApi\n *\/\n@NgModule({\n  \/**\n   * Optional configuration for XSRF protection.\n   *\/\n  imports: [\n    HttpClientXsrfModule.withOptions({\n      cookieName: 'XSRF-TOKEN',\n      headerName: 'X-XSRF-TOKEN',\n    }),\n  ],\n  \/**\n   * Configures the [dependency injector](guide\/glossary#injector) where it is imported\n   * with supporting services for HTTP communications.\n   *\/\n  providers: [\n    HttpClient,\n    {provide: HttpHandler, useClass: HttpInterceptingHandler},\n    HttpXhrBackend,\n    {provide: HttpBackend, useExisting: HttpXhrBackend},\n    BrowserXhr,\n    {provide: XhrFactory, useExisting: BrowserXhr},\n  ],\n})\nexport class HttpClientModule {\n}\n<\/pre>\n<p><code>providers<\/code> \u306f\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u542b\u3080\u30b5\u30fc\u30d3\u30b9\u30af\u30e9\u30b9\u3092 Angular \u306e\u4f9d\u5b58\u6027\u306e\u6ce8\u5165 (DI) \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u306b\u767b\u9332\u3057\u3001<br \/>\n\u5b9f\u969b\u306b\u4f9d\u5b58\u6027\u3092\u6ce8\u5165\u3059\u308b\u969b\u306e\u30b5\u30fc\u30d3\u30b9\u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u4f5c\u6210\u306e\u65b9\u6cd5\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306f\u7701\u7565\u3055\u308c\u305f\u8868\u8a18\u3067\u3001\u7701\u7565\u305b\u305a\u306b\u66f8\u304f\u3068\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre>\nproviders: [\n    {provide: HttpClient, useClass: HttpClient, multi: false},\n    {provide: HttpHandler, useClass: HttpInterceptingHandler, multi: false},\n    {provide: HttpXhrBackend, useClass: HttpXhrBackend, multi: false},\n    {provide: HttpBackend, useExisting: HttpXhrBackend, multi: false},\n    {provide: BrowserXhr, useClass: BrowserXhr, multi: false}\n    {provide: XhrFactory, useExisting: BrowserXhr, multi: false}},\n  ],\n<\/pre>\n<p><code>provide<\/code> \u3068\u3044\u3046\u306e\u306f\u3001DI \u30c8\u30fc\u30af\u30f3\u306e\u3053\u3068\u3067\u3001\u4f9d\u5b58\u95a2\u4fc2\u3092\u8981\u6c42\u3055\u308c\u305f\u3068\u304d\u306b\u53c2\u7167\u3059\u308b\u5185\u90e8\u30c8\u30fc\u30af\u30f3\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u30de\u30c3\u30d7\u306b\u304a\u3051\u308b\u30eb\u30c3\u30af\u30a2\u30c3\u30d7\u30ad\u30fc\u3067\u3059\u3002<br \/>\n\u3053\u3053\u3067\u306f\u30af\u30e9\u30b9\u578b\u3092 <code>provide<\/code> \u3068\u3057\u3066\u6307\u5b9a\u3057\u3066\u304a\u308a\u3001\u4f9d\u5b58\u95a2\u4fc2\u3092\u8981\u6c42\u3059\u308b\u5074\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306a\u3069\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306e\u5f15\u6570\u306e\u578b\u6307\u5b9a\u3092DI\u30c8\u30fc\u30af\u30f3\u3068\u540c\u3058\u306b\u3059\u308b\u3053\u3068\u3067\u3001<br \/>\nDI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u304b\u3089\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001\u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u304b\u3089 <code>HttpClient<\/code> \u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\n  constructor (private http: HttpClient) {}\n<\/pre>\n<p><code>useClass<\/code>\u3001<code>useExisting<\/code> \u306f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4f5c\u308a\u65b9\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><code>useClass<\/code> \u306f\u5024\u3068\u3057\u3066\u30af\u30e9\u30b9\u3092\u53d7\u3051\u53d6\u308a\u3001\u4f9d\u5b58\u95a2\u4fc2\u3092\u8981\u6c42\u3055\u308c\u308b\u305f\u3073\u306b\u305d\u306e\u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u308a\u76f4\u3057\u307e\u3059\u3002<\/p>\n<p>Angular \u306f\u968e\u5c64\u6027\u3092\u3082\u3063\u305f DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u30b7\u30b9\u30c6\u30e0\u3092\u63a1\u7528\u3057\u3066\u304a\u308a\u3001<br \/>\n\u30a2\u30d7\u30ea\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u3068\u4e26\u884c\u3059\u308b\u5f62\u3067\u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u30c4\u30ea\u30fc\u3092\u6301\u3061\u307e\u3059\u3002<\/p>\n<p>AppModule \u304c\u6301\u3064 DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u306f\u30a2\u30d7\u30ea\u5168\u4f53\u306e\u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u968e\u5c64\u306e\u30eb\u30fc\u30c8\u3067\u3059\u3002<br \/>\n\u4f9d\u5b58\u95a2\u4fc2\u3092\u8981\u6c42\u3059\u308b\u5074\u3067\u3042\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082 DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u3092\u6301\u3064\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u3001<br \/>\n\u81ea\u8eab\u306e DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u306b\u8981\u6c42\u3055\u308c\u305f DI \u30c8\u30fc\u30af\u30f3\u304c\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f\u3001\u89aa\u306e DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u3092\u53c2\u7167\u3057\u307e\u3059\u3002<br \/>\n\u3053\u306e\u5834\u5408\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u751f\u6210\u306f\u89aa\u306e DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u304c\u884c\u306a\u3046\u305f\u3081\u3001<code>useClass<\/code> \u3092\u6307\u5b9a\u3057\u3066\u3044\u305f\u3068\u3057\u3066\u3082\u3001<br \/>\n\u30eb\u30fc\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6ce8\u5165\u3055\u308c\u308b\u30b5\u30fc\u30d3\u30b9\u30af\u30e9\u30b9\u3092 <code>useClass<\/code> \u6307\u5b9a\u3067\u767b\u9332\u3059\u308b\u3053\u3068\u3067\u3001\u5168\u3066\u540c\u3058\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u53c2\u7167\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><code>useExisting<\/code> \u306f\u3001\u5024\u3068\u3057\u3066 DI \u30c8\u30fc\u30af\u30f3\u3092\u53d7\u3051\u53d6\u308a\u3001\u6307\u5b9a\u3055\u308c\u305fDI\u30c8\u30fc\u30af\u30f3\u306b\u5bfe\u3059\u308b\u30a8\u30a4\u30ea\u30a2\u30b9\u3092\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\u7570\u306a\u308b DI \u30c8\u30fc\u30af\u30f3\u3067\u3001\u540c\u3058\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5f97\u3089\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u4e0b\u8a18\u306e\u4f8b\u3060\u3068\u3001<code>HttpBackend<\/code> \u3068\u3044\u3046 DI \u30c8\u30fc\u30af\u30f3\u3067\u3001<code>HttpXhrBackend<\/code> \u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>\n    {provide: HttpXhrBackend, useClass: HttpXhrBackend, multi: false},\n    {provide: HttpBackend, useExisting: HttpXhrBackend, multi: false},\n<\/pre>\n<p><code>multi<\/code> \u306f\u540c\u3058 DI \u30c8\u30fc\u30af\u30f3\u3067\u3001\u8907\u6570\u306e\u5024\u3092\u5f97\u305f\u3044\u5834\u5408\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<br \/>\n\u7701\u7565\u3057\u305f\u5834\u5408\u306f\u3001false \u306b\u306a\u308b\u305f\u3081\u3001<code>HttpClientModule<\/code> \u3067\u306f\u5168\u3066 false \u3067\u3059\u3002<\/p>\n<p><code>AppModule<\/code> \u306e\u4e2d\u3067 <code>HttpClientModule<\/code> \u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3053\u3068\u3067\u3001<br \/>\n<code>HttpClient<\/code>\u3001<code>HttpInterceptingHandler<\/code>\u3001<code>HttpXhrBackend<\/code>\u306a\u3069\u304c DI \u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u306b\u767b\u9332\u3055\u308c\u3001<br \/>\n\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>DI \u306e\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/angular-di.png\" rel=\"facebox\" rel=\"attachment wp-att-22730\"><img loading=\"lazy\" src=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/angular-di.png\" alt=\"\" width=\"600\" height=\"387\" class=\"alignleft size-full wp-image-22730\" \/><\/a><br \/>\n\u3000<\/p>\n<h2>\u591a\u6bb5\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3<\/h2>\n<p>\u6b21\u306b\u3001<code>HttpClientModule<\/code> \u3067 provider \u6307\u5b9a\u3055\u308c\u3066\u3044\u308b <code>HttpClient<\/code> \u3092\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u306e\u5f15\u6570\u306b <code>HttpHandler<\/code> \u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001<br \/>\n\u81ea\u8eab\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u304c\u547c\u3070\u308c\u305f\u5834\u5408\u3001<code>HttpHandler<\/code> \u578b\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u8981\u6c42\u3057\u3001\u305d\u308c\u3092 <code>handler<\/code> \u3068\u3044\u3046 private \u5909\u6570\u306b\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3055\u308c\u307e\u3059\u3002<br \/>\nHTTP \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u5b9f\u884c\u306f\u3001<code>request<\/code> \u30e1\u30bd\u30c3\u30c9\u3067\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001<br \/>\n\u5b9f\u969b\u306b\u306f <code>HttpHandler<\/code> \u306b\u51e6\u7406\u3092\u59d4\u8b72\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u8aad\u307f\u53d6\u308c\u307e\u3059\u3002<\/p>\n<pre>\n@Injectable()\nexport class HttpClient {\n  constructor(private handler: HttpHandler) {}\n  (\u4e2d\u7565)\n  request(first: string|HttpRequest<any>, url?: string, options: {\n    body?: any,\n    headers?: HttpHeaders|{[header: string]: string | string[]},\n    observe?: HttpObserve,\n    params?: HttpParams|{[param: string]: string | string[]},\n    reportProgress?: boolean,\n    responseType?: 'arraybuffer'|'blob'|'json'|'text',\n    withCredentials?: boolean,\n  } = {}): Observable<any> {\n  (\u4e2d\u7565)\n    \/\/ Start with an Observable.of() the initial request, and run the handler (which\n    \/\/ includes all interceptors) inside a concatMap(). This way, the handler runs\n    \/\/ inside an Observable chain, which causes interceptors to be re-run on every\n    \/\/ subscription (this also makes retries re-run the handler, including interceptors).\n    const events$: Observable<HttpEvent<any>> =\n        of (req).pipe(concatMap((req: HttpRequest<any>) => this.handler.handle(req)));\n<\/pre>\n<p>\u6b21\u306b\u3001<code>HttpHandler<\/code> \u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u5b9f\u4f53\u306f\u3001<code>HttpInterceptingHandler<\/code> \u30af\u30e9\u30b9\u3067\u3059\u3002<\/p>\n<pre>\n    {provide: HttpHandler, useClass: HttpInterceptingHandler},\n<\/pre>\n<p>\u81ea\u8eab\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u304c\u547c\u3070\u308c\u305f\u5834\u5408\u3001<code>HttpBackend<\/code> \u578b\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u8981\u6c42\u3057\u3001\u305d\u308c\u3092 <code>backend<\/code> \u3068\u3044\u3046 private \u5909\u6570\u306b\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3055\u308c\u307e\u3059\u3002<br \/>\n\uff08\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308c\u3070\uff09\u5148\u306b\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u304c\u5b9f\u884c\u3055\u308c\u3001\u305d\u306e\u5f8c\u306b <code>HttpBackend<\/code> \u306b\u30ea\u30af\u30a8\u30b9\u30c8\u51e6\u7406\u3092\u59d4\u8b72\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\n\/**\n * An injectable `HttpHandler` that applies multiple interceptors\n * to a request before passing it to the given `HttpBackend`.\n *\n * The interceptors are loaded lazily from the injector, to allow\n * interceptors to themselves inject classes depending indirectly\n * on `HttpInterceptingHandler` itself.\n * @see `HttpInterceptor`\n *\/\n@Injectable()\nexport class HttpInterceptingHandler implements HttpHandler {\n  private chain: HttpHandler|null = null;\n\n  constructor(private backend: HttpBackend, private injector: Injector) {}\n\n  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {\n    if (this.chain === null) {\n      const interceptors = this.injector.get(HTTP_INTERCEPTORS, []);\n      this.chain = interceptors.reduceRight(\n          (next, interceptor) => new HttpInterceptorHandler(next, interceptor), this.backend);\n    }\n    return this.chain.handle(req);\n  }\n}\n<\/pre>\n<p>\u6b21\u306b\u3001<code>HttpBackend<\/code> \u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u305d\u306e\u5b9f\u4f53\u306f\u3001<code>HttpXhrBackend<\/code> \u30af\u30e9\u30b9\u3067\u3059\u3002<\/p>\n<pre>\n    HttpXhrBackend,\n    {provide: HttpBackend, useExisting: HttpXhrBackend},\n<\/pre>\n<p><code>handle<\/code> \u30e1\u30bd\u30c3\u30c9\u5185\u90e8\u3067\u3001<code>XMLHttpRequest<\/code> \u3092\u751f\u6210\u3057\u3066\u3001HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n<pre>\n\/**\n * An `HttpBackend` which uses the XMLHttpRequest API to send\n * requests to a backend server.\n *\n * @publicApi\n *\/\n@Injectable()\nexport class HttpXhrBackend implements HttpBackend {\n  constructor(private xhrFactory: XhrFactory) {}\n\n  \/**\n   * Process a request and return a stream of response events.\n   *\/\n  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {\n    (\u4e2d\u7565)\n\n    \/\/ Everything happens on Observable subscription.\n    return new Observable((observer: Observer<HttpEvent<any>>) => {\n      \/\/ Start by setting up the XHR object with request method, URL, and withCredentials flag.\n      const xhr = this.xhrFactory.build();\n      xhr.open(req.method, req.urlWithParams);\n      (\u4e2d\u7565)\n\n      \/\/ Fire the request, and notify the event stream that it was fired.\n      xhr.send(reqBody !);\n      observer.next({type: HttpEventType.Sent});\n\n      \/\/ This is the return from the Observable function, which is the\n      \/\/ request cancellation handler.\n      return () => {\n        \/\/ On a cancellation, remove all registered event listeners.\n        xhr.removeEventListener('error', onError);\n        xhr.removeEventListener('load', onLoad);\n        if (req.reportProgress) {\n          xhr.removeEventListener('progress', onDownProgress);\n          if (reqBody !== null && xhr.upload) {\n            xhr.upload.removeEventListener('progress', onUpProgress);\n          }\n        }\n\n        \/\/ Finally, abort the in-flight request.\n        xhr.abort();\n      };\n    });\n  }\n}\n<\/pre>\n<p><code>HttpClient<\/code> -> <code>HttpHandler<\/code> -> <code>HttpBackend<\/code> \u3068\u591a\u6bb5\u306b\u95a2\u9023\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u30af\u30e9\u30b9\u304c\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3055\u308c\u3066\u3044\u3063\u3066\u3001<br \/>\nHTTP \u30ea\u30af\u30a8\u30b9\u30c8\u51e6\u7406\u306e\u305d\u306e\u3082\u306e\u306f\u3001\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b <code>HttpBackend<\/code> \u30af\u30e9\u30b9\u304c\u62c5\u3063\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/inside-http-client-module.png\" rel=\"facebox\" rel=\"attachment wp-att-22743\"><img loading=\"lazy\" src=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/inside-http-client-module-1024x136.png\" alt=\"\" width=\"700\" height=\"100\" class=\"alignleft size-large wp-image-22743\" \/><\/a><br \/>\n\u3000<\/p>\n<h2>HttpClientInMemoryWebApiModule \u306f\u4f55\u3092\u3057\u3066\u3044\u308b\u306e\u304b<\/h2>\n<p>\u3067\u306f\u3001<code>HttpClientInMemoryWebApiModule<\/code> \u306f\u4f55\u3092\u3057\u3066\u3044\u308b\u306e\u3067\u3057\u3087\u3046\u304b\u3002<br \/>\n<code>AppModule<\/code> \u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u6307\u5b9a\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<pre>\n@NgModule({\n imports: [\n   HttpClientModule,\n   HttpClientInMemoryWebApiModule.forRoot(InMemHeroService),\n   ...\n ],\n ...\n})\nexport class AppModule { ... }\n<\/pre>\n<p><code>HttpClientInMemoryWebApiModule<\/code> \u306e <code>forRoot<\/code> \u30e1\u30bd\u30c3\u30c9\u306e\u4e2d\u3092\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<pre>\n@NgModule({})\nexport class HttpClientInMemoryWebApiModule {\n  \/**\n  *  Redirect the Angular `HttpClient` XHR calls\n  *  to in-memory data store that implements `InMemoryDbService`.\n  *  with class that implements InMemoryDbService and creates an in-memory database.\n  *\n  *  Usually imported in the root application module.\n  *  Can import in a lazy feature module too, which will shadow modules loaded earlier\n  *\n  * @param {Type} dbCreator - Class that creates seed data for in-memory database. Must implement InMemoryDbService.\n  * @param {InMemoryBackendConfigArgs} [options]\n  *\n  * @example\n  * HttpInMemoryWebApiModule.forRoot(dbCreator);\n  * HttpInMemoryWebApiModule.forRoot(dbCreator, {useValue: {delay:600}});\n  *\/\n  static forRoot(dbCreator: Type<InMemoryDbService>, options?: InMemoryBackendConfigArgs): ModuleWithProviders {\n    return {\n      ngModule: HttpClientInMemoryWebApiModule,\n      providers: [\n        { provide: InMemoryDbService,  useClass: dbCreator },\n        { provide: InMemoryBackendConfig, useValue: options },\n\n        { provide: HttpBackend,\n          useFactory: httpClientInMemBackendServiceFactory,\n          deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]}\n      ]\n    };\n  }\n(\u4ee5\u4e0b\u7565)\n<\/pre>\n<p><code>forRoot<\/code> \u30e1\u30bd\u30c3\u30c9\u306e\u4e2d\u306e\u7b2c\u4e00\u5f15\u6570\u306b\u6307\u5b9a\u3057\u305f\u5024\u3092\u3001DI \u30c8\u30fc\u30af\u30f3 <code>InMemoryDbService<\/code> \u3068\u3057\u3066\u3001<br \/>\n\u7b2c2\u5f15\u6570\u306b\u6307\u5b9a\u3057\u305f\u5024\u3092\u3001DI \u30c8\u30fc\u30af\u30f3 <code>InMemoryBackendConfig<\/code> \u3068\u3057\u3066\u30a4\u30f3\u30b8\u30a7\u30af\u30bf\u30fc\u306b\u767b\u9332\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\n      providers: [\n        { provide: InMemoryDbService,  useClass: dbCreator },\n        { provide: InMemoryBackendConfig, useValue: options },\n<\/pre>\n<p>\u305d\u3057\u3066\u3001DI \u30c8\u30fc\u30af\u30f3 <code>HttpBackend<\/code> \u306b\u3001<code>useFactory: httpClientInMemBackendServiceFactory<\/code> \u3092\u767b\u9332\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\n        { provide: HttpBackend,\n          useFactory: httpClientInMemBackendServiceFactory,\n          deps: [InMemoryDbService, InMemoryBackendConfig, XhrFactory]}\n      ]\n<\/pre>\n<p>\u3053\u3053\u3067\u3001\u3082\u3046\u4e00\u5ea6 <code>HttpClientModule<\/code> \u306e <code>providers<\/code> \u3092\u898b\u3066\u307f\u308b\u3068\u3001<code>HttpBackend<\/code> \u3068\u3044\u3046 DI \u30c8\u30fc\u30af\u30f3\u304c\u5ba3\u8a00\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>\n  providers: [\n    HttpClient,\n    {provide: HttpHandler, useClass: HttpInterceptingHandler},\n    HttpXhrBackend,\n    {provide: HttpBackend, useExisting: HttpXhrBackend},\n    BrowserXhr,\n    {provide: XhrFactory, useExisting: BrowserXhr},\n  ],\n<\/pre>\n<p>\u540c\u3058 DI \u30c8\u30fc\u30af\u30f3\u304c <code>providers<\/code> \u5185\u3067\u8907\u6570\u56de\u5ba3\u8a00\u3055\u308c\u305f\u5834\u5408\u3001\u5f8c\u52dd\u3061\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u3064\u307e\u308a\u3001\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b <code>HttpBackend<\/code> \u3068\u3044\u3046 DI \u30c8\u30fc\u30af\u30f3\u3067\u5f97\u3089\u308c\u308b\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u3001<code>HttpXhrBackend<\/code> \u30af\u30e9\u30b9\u304b\u3089\u3001<code>useFactory: httpClientInMemBackendServiceFactory<\/code> \u3067\u751f\u6210\u3055\u308c\u308b\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u7f6e\u304d\u63db\u3048\u3089\u308c\u307e\u3059\u3002<br \/>\n(<code>HttpClientInMemoryWebApiModule<\/code> \u306f <code>HttpClientModule<\/code> \u3088\u308a\u5f8c\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3001\u3068\u3044\u3046\u7406\u7531\u304c\u3053\u3053\u3067\u5206\u304b\u308a\u307e\u3057\u305f\u3002)<\/p>\n<p><a href=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/override-http-client-module.png\" rel=\"facebox\" rel=\"attachment wp-att-22744\"><img loading=\"lazy\" src=\"https:\/\/www.techscore.com\/blog\/wp\/wp-content\/uploads\/2019\/08\/override-http-client-module-1024x216.png\" alt=\"\" width=\"700\" height=\"112\" class=\"alignleft size-large wp-image-22744\" \/><\/a><br \/>\n\u3000<\/p>\n<p><code>useFactory<\/code> \u306b\u306f\u95a2\u6570\u3092\u6307\u5b9a\u3057\u3001\u4f9d\u5b58\u95a2\u4fc2\u3092\u8981\u6c42\u3055\u308c\u308b\u305f\u3073\u306b\u95a2\u6570\u304c\u5b9f\u884c\u3055\u308c\u3001\u305d\u306e\u95a2\u6570\u306e\u623b\u308a\u5024\u304c\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3055\u308c\u307e\u3059\u3002<br \/>\n<code>deps<\/code> \u306b\u306f\u3001<code>useFactory<\/code> \u3067\u6307\u5b9a\u3057\u305f\u95a2\u6570\u306b\u6e21\u3059\u5f15\u6570\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p><code>httpClientInMemBackendServiceFactory<\/code> \u3092\u898b\u3066\u307f\u308b\u3068\u3001<code>HttpClientBackendService<\/code> \u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u751f\u6210\u3057\u3066\u8fd4\u3057\u3066\u3044\u308b\u306e\u304c\u5206\u304b\u308a\u307e\u3059\u3002<br \/>\n\u3053\u306e <code>HttpClientBackendService<\/code> \u304c HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u3067 Web API \u30e2\u30c3\u30af\u3092\u5b9f\u73fe\u3057\u3066\u3044\u308b\u3068\u3044\u3046\u8a33\u3067\u3059\u3002<\/p>\n<pre>\n\/\/ Internal - Creates the in-mem backend for the HttpClient module\n\/\/ AoT requires factory to be exported\nexport function httpClientInMemBackendServiceFactory(\n  dbService: InMemoryDbService,\n  options: InMemoryBackendConfig,\n  xhrFactory: XhrFactory,\n): HttpBackend {\n  const backend: any = new HttpClientBackendService(dbService, options, xhrFactory);\n  return backend;\n}\n<\/pre>\n<h2>\u30e2\u30c3\u30af\u306e\u5b9f\u969b\u306e\u52d5\u304d<\/h2>\n<p><code>HttpClientBackendService<\/code> \u30af\u30e9\u30b9\u3092\u898b\u308b\u3068\u3001\u51e6\u7406\u306e\u5b9f\u4f53\u306f <code>handleRequest<\/code> \u30e1\u30bd\u30c3\u30c9\u306b\u3042\u308a\u305d\u3046\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<pre>\n@Injectable()\nexport class HttpClientBackendService extends BackendService implements HttpBackend {\n\n  constructor(\n    inMemDbService: InMemoryDbService,\n    @Inject(InMemoryBackendConfig) @Optional() config: InMemoryBackendConfigArgs,\n    private xhrFactory: XhrFactory\n    ) {\n    super(inMemDbService, config);\n  }\n\n  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {\n    try {\n      return this.handleRequest(req);\n\n    } catch (error) {\n      const err = error.message || error;\n      const resOptions = this.createErrorResponseOptions(req.url, STATUS.INTERNAL_SERVER_ERROR, `${err}`);\n      return this.createResponse$(() => resOptions);\n    }\n  }\n(\u4ee5\u4e0b\u7565)\n<\/pre>\n<p><code>handleRequest<\/code> \u30e1\u30bd\u30c3\u30c9\u306f\u3001\u89aa\u30af\u30e9\u30b9 <code>BackendService<\/code> \u306b\u3042\u308b\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/github.com\/angular\/in-memory-web-api#request-evaluation-order\">Request evaluation order<\/a> \u306b\u3001\u30e2\u30c3\u30af\u5185\u90e8\u3067\u3069\u306e\u3088\u3046\u306b HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u51e6\u7406\u304c\u884c\u308f\u308c\u3066\u3044\u308b\u304b\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001<code>handleRequest<\/code> \u30e1\u30bd\u30c3\u30c9\u306b\u51e6\u7406\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<br \/>\n(\u4ee5\u4e0b\u5f15\u7528\u3067\u3059)<\/p>\n<blockquote>\n<ol>\n<li>If it looks like a command, process as a command<\/li>\n<li>If the HTTP method is overridden, try the override.<\/li>\n<li>If the resource name (after the api base path) matches one of the configured collections, process that<\/li>\n<li>If not but the Config.passThruUnknownUrl flag is true, try to pass the request along to a real XHR.<\/li>\n<li>Return a 404.<\/li>\n<\/ol>\n<\/blockquote>\n<pre>\nexport abstract class BackendService {\n(\u4e2d\u7565)\n\n  constructor(\n    protected inMemDbService: InMemoryDbService,\n    config: InMemoryBackendConfigArgs = {}\n  ) {\n    const loc = this.getLocation('\/');\n    this.config.host = loc.host;     \/\/ default to app web server host\n    this.config.rootPath = loc.path; \/\/ default to path when app is served (e.g.'\/')\n    Object.assign(this.config, config);\n  }\n\n(\u4e2d\u7565)\n  protected handleRequest(req: RequestCore): Observable<any> {\n    \/\/  handle the request when there is an in-memory database\n    return this.dbReady.pipe(concatMap(() => this.handleRequest_(req)));\n  }\n\n  protected handleRequest_(req: RequestCore): Observable<any> {\n\n    const url = req.urlWithParams ? req.urlWithParams : req.url;\n\n    \/\/ Try override parser\n    \/\/ If no override parser or it returns nothing, use default parser\n    const parser = this.bind('parseRequestUrl');\n    const parsed: ParsedRequestUrl =\n      ( parser && parser(url, this.requestInfoUtils)) ||\n      this.parseRequestUrl(url);\n\n    const collectionName = parsed.collectionName;\n    const collection = this.db[collectionName];\n\n    const reqInfo: RequestInfo = {\n      req: req,\n      apiBase: parsed.apiBase,\n      collection: collection,\n      collectionName: collectionName,\n      headers: this.createHeaders({ 'Content-Type': 'application\/json' }),\n      id: this.parseId(collection, collectionName, parsed.id),\n      method: this.getRequestMethod(req),\n      query: parsed.query,\n      resourceUrl: parsed.resourceUrl,\n      url: url,\n      utils: this.requestInfoUtils\n    };\n\n    let resOptions: ResponseOptions;\n\n    if (\/commands\\\/?$\/i.test(reqInfo.apiBase)) {\n      return this.commands(reqInfo);\n    }\n\n    const methodInterceptor = this.bind(reqInfo.method);\n    if (methodInterceptor) {\n      \/\/ InMemoryDbService intercepts this HTTP method.\n      \/\/ if interceptor produced a response, return it.\n      \/\/ else InMemoryDbService chose not to intercept; continue processing.\n      const interceptorResponse = methodInterceptor(reqInfo);\n      if (interceptorResponse) {\n        return interceptorResponse;\n      };\n    }\n\n    if (this.db[collectionName]) {\n      \/\/ request is for a known collection of the InMemoryDbService\n      return this.createResponse$(() => this.collectionHandler(reqInfo));\n    }\n\n    if (this.config.passThruUnknownUrl) {\n      \/\/ unknown collection; pass request thru to a \"real\" backend.\n      return this.getPassThruBackend().handle(req);\n    }\n\n    \/\/ 404 - can't handle this request\n    resOptions = this.createErrorResponseOptions(\n      url,\n      STATUS.NOT_FOUND,\n      `Collection '${collectionName}' not found`\n    );\n    return this.createResponse$(() => resOptions);\n  }\n<\/pre>\n<p>\u307e\u305f\u3001<code>bind<\/code> \u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3067\u3001<code>InMemoryDbService<\/code> \u306b\u5b9f\u88c5\u3055\u308c\u3066\u3044\u308b URL \u30d1\u30fc\u30b5\u3084\u3001HTTP \u30e1\u30bd\u30c3\u30c9\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<code>InMemoryDbService<\/code> \u306e\u5b9f\u88c5\u30af\u30e9\u30b9\u3067 <code>parseRequestUrl<\/code> \u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3092\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3057\u3001\u30ea\u30af\u30a8\u30b9\u30c8 URL \u306e\u89e3\u91c8\u3092\u5909\u66f4\u3057\u305f\u308a\u3001<br \/>\n<code>get<\/code> \u3084 <code>post<\/code> \u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u8a72\u5f53\u3059\u308b HTTP \u30e1\u30bd\u30c3\u30c9\u306e\u52d5\u304d\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre>\n  \/**\n   * Get a method from the `InMemoryDbService` (if it exists), bound to that service\n   *\/\n  protected bind<T extends Function>(methodName: string) {\n    const fn = this.inMemDbService[methodName] as T;\n    return fn ? <T> fn.bind(this.inMemDbService) : undefined;\n  }\n<\/pre>\n<h2>\u304a\u308f\u308a\u306b<\/h2>\n<p>Angular in-memory-web-api \u306e\u4f7f\u3044\u65b9\u3060\u3051\u307f\u3066\u3082\u7c21\u5358\u306b\u4f7f\u3048\u305d\u3046\u3060\u3051\u3069\u30a4\u30de\u30a4\u30c1\u4ed5\u7d44\u307f\u304c\u5206\u304b\u3089\u306a\u3044\u306e\u3067\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u30dd\u30a4\u30f3\u30c8\u304c\u3069\u3053\u306a\u306e\u304b\u304c\u3088\u304f\u5206\u304b\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8aad\u3093\u3067\u3044\u304f\u3053\u3068\u3067\u4ed5\u7d44\u307f\u3084\u3001\u3069\u3046\u3044\u3063\u305f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u3067\u304d\u308b\u304b\u7406\u89e3\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001Angular \u306e DI \u3084\u3001HttpClient \u306e\u4ed5\u7d44\u307f\u306e\u7406\u89e3\u306e\u52a9\u3051\u306b\u306a\u308b\u6587\u732e\u3092\u8f09\u305b\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/angular.jp\/guide\/dependency-injection\">Angular \u306e\u4f9d\u5b58\u6027\u306e\u6ce8\u5165<\/a><\/li>\n<li><a href=\"https:\/\/angular.jp\/guide\/dependency-injection-in-action\">DI \u30a4\u30f3\u30fb\u30a2\u30af\u30b7\u30e7\u30f3<\/a><\/li>\n<li><a href=\"https:\/\/blog.angularindepth.com\/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular-103fbdb397bf\">Insider\u2019s guide into interceptors and HttpClient mechanics in Angular<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001\u767d\u5ddd\u3067\u3059\u3002<\/p>\n<p>\u6700\u8fd1\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3060\u3051\u3067\u306a\u304f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3082\u62c5\u5f53\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u3001Angular \u3092\u89e6\u308b\u6a5f\u4f1a\u304c\u5897\u3048\u3066\u3044\u307e\u3059\u3002<br \/><a href=\"https:\/\/www.techscore.com\/blog\/2019\/08\/23\/angular-in-memory-web-api-%e3%81%af%e3%81%a9%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e4%bb%95%e7%b5%84%e3%81%bf%e3%81%a7%e5%8b%95%e4%bd%9c%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%81%8b\/\">\u7d9a\u304d\u3092\u8aad\u3080...<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[162],"_links":{"self":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22728"}],"collection":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/comments?post=22728"}],"version-history":[{"count":24,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22728\/revisions"}],"predecessor-version":[{"id":22856,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22728\/revisions\/22856"}],"wp:attachment":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/media?parent=22728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/categories?post=22728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/tags?post=22728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}