101. 同一API callをマージする

JavaScript
お役に立つのか?

難しい?  - accepted / - tried

getAPI()でAPIを叩けるとしよう。

const getAPI =  <T>(
  path: string, 
  config: SomeConfig
): Promise<T> => { ... }

const list1 = await getAPI('/list', { keyword: 'bfe'})
const list2 = await getAPI('/list', { keyword: 'dev'})

上記のコードがうまく動いていたが、UIがすごく複雑になり、短時間に同じAPIは何度も呼ばれたことになった。

1000ms以内であれば、同一GET APIコールが同じレスポンスを返す

上記の仮説では、同一のAPIコールを省けるとあなたが考えた。「同一」とは、pathconfigdeeply equalであること。

以下のgetAPIWithMerging(path: string, config: SomeConfig)を実装して、キャッシュを入れた。


getAPIWithMerging('/list', { keyword: 'bfe'}).then(...)  
// 1回目のコール、getAPIが呼ばれる。

getAPIWithMerging('/list', { keyword: 'bfe'}).then(...) 
// 2回目は同一コールなので、
// getAPI は呼ばれない
// 1回目のコールにマージされる

getAPIWithMerging('/list', { keyword: 'dev'}).then(...)
// 3回目は違うパラメーターで、getAPIが呼ばれる

// 1000ms後
getAPIWithMerging('/list', {keyword: 'bfe'}).then(...)
// 4回目のコールは1回目と同一であるが、
// 1000ms後なので、getAPIは呼ばれる

メモリーリークにご注意を!

この問題では、キャッシュエントリーを最大5件までに設定してください。つまり:

getAPIWithMerging('/list1', { keyword: 'bfe'}).then(...) 
// 1回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list2', { keyword: 'bfe'}).then(...) 
// 2回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list3', { keyword: 'bfe'}).then(...) 
// 3回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list4', { keyword: 'bfe'}).then(...) 
// 4回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list5', { keyword: 'bfe'}).then(...) 
// 5回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える

getAPIWithMerging('/list6', { keyword: 'bfe'}).then(...) 
// 6回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
// 1回目のキャッシュは消される

getAPIWithMerging('/list1', { keyword: 'bfe'}).then(...) 
// 1回目のコールと同一だが、キャッシュがないので
// 新規キャッシュエントリーが増える

clear()

テストのために、全てのキャッシュをクリアするclear()を提供してください。

getAPIWithMerging.clearCache()

20分間以内で解いてみて

ディスカス(9)