在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 }),
    ],
})

由于我找不到有关日语的描述,所以我自己写了一下。

广告
将在 10 秒后关闭
bannerAds