RxJSを使用せずにswitchMap(flatMapLatest)を実現する #JavaScript

APIにリクエストした時に最後のリクエスト結果だけを取得したいと思う時があり、RxJSのswitchMapに頼ることがあったけど、少し考えてみればなんてことのない処理で実現できた。

最新のPromiseの結果だけを実行する関数

function createPromiseLatest(callback) {
    let latestPromise = null; // 最後に実行したいPromiseを管理
    return function promiseLatest(promise) {
        latestPromise = promise; // 追加されたPromiseを取得
        promise.then((value) => {
            // 最後に実行したいPromiseと追加されたPromiseが一致したら実行
            if (latestPromise === promise) {
                callback(value);
            }
        });
    }
}

使い方

function sleep(ms, value) {
  return new Promise((resolve) => setTimeout(() => {resolve(value);}, ms));
}

const callback = (value) => {
    console.log('Hello ' + value);
}
const promiseLatest = createPromiseLatest(callback);

// 1件目、２件目は処理されるが出力対象にはならない
promiseLatest(sleep(1000, "Mike"));
promiseLatest(sleep(2000, "Henry"));
promiseLatest(sleep(3000, "Bob"));
// console log: Hello Bob

ちなみに最初のPromiseだけ処理したい場合なら下記でできる。

最初のPromiseの結果だけ実行する関数

function createPromiseFirst(callback) {
    let firstPromise = null; // 最初に実行したいPromiseを管理
    return function promiseFirst(promise) {
        if (firstPromise !== null) return; // Promiseがすでにあるなら処理しない
        firstPromise = promise;
        promise.then((value) => {
            callback(value);
        });
    }
}

使い方

function sleep(ms, value) {
  return new Promise((resolve) => setTimeout(() => {resolve(value);}, ms));
}

const callback = (value) => {
    console.log('Hello ' + value);
}
const promiseFirst = createPromiseFirst(callback);

// 2件目、3件目は処理されるが出力対象にはならない
promiseFirst(sleep(1000, "Mike"));
promiseFirst(sleep(2000, "Henry"));
promiseFirst(sleep(3000, "Bob"));
// console log: Hello Mike

便利なものを知りすぎると、すぐにそれにばっかり頼ってしまうので、気をつけたい😭