⚠️ This questions is updated on Oct 22, 2022 which has breaking changes on test specs. Thanks to @Qzlt4LK.

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

const getAPI = (path, config) => { ... }

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

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

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

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

以下のcreateGetAPIWithMerging(getAPI)を実装して、キャッシュを入れた。

const getAPIWithMerging = createGetAPIWithMerging(getAPI)

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()

動画リスト - JavaScript コーディング問題101. 同一API callをマージする

動画リスト - JavaScript コーディング問題
101. 同一API callをマージする