在Angular2上,我们如何同时使用angular-in-memory-web-api模拟和URL访问的方法?
angular-in-memory-web-api是什么
这个是用于从WebAPI获取数据的部分模拟。它是在Angular2中提供的。可以在Angular官方的教程中找到。链接:https://angular.io/docs/ts/latest/tutorial/toh-pt6.html
大致的使用方法是什么?
- import
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService),
],
})
- モックデータは変数にjsonを設定。その変数をpathと紐づける形で定義します。
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let timesheets = [{ … },{ … }];
return {'timesheets':timesheets};
}
}
- request 部分のコードは実際WebAPIへアクセスする時の形で記述します。但し、urlはangular-in-memory-web-api 用のpathを指定する必要があります。
export class TimesheetsService {
private timesheetsUrl = 'api/timesheets'; // URL to web api
constructor(private http: Http) { }
getTimesheets(): Promise<Timesheets[]> {
return this.http.get(this.timesheetsUrl)
.toPromise()
.then(this.extractData)
.catch(this.handleError);
}
}
请问有什么问题吗?
如果想要只对一些API进行实际的URL访问,仅仅改变URL会导致404-找不到错误。
解决方案 ‘àn)
需要设置 Config。
指定 passThruUnknownUrl:true。
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }),
],
})
由于我找不到有关日语的描述,所以我自己写了一下。