1

既存のコードの一部を JavaScript Promises に置き換えようとしていますが、間違っていないことを確認したいだけです (または、もっと良い方法があるかもしれません)。es6-promiseライブラリを使用しています。

私が持っているのは、JavaScript Promises を使用するように更新した 3 つの関数です (以前はネストされたコールバックのような混乱でした)。関数には実際にはデュアル モードがあるはずです。つまり、通常の関数のように使用して結果を返すようにしたり、それらを連鎖させたりすることができます。

function func_1()
{
    return new Promise(function(resolve, reject){
        if(condition)
        {
            resolve('1');
        }
        else
        {
            console.log('start');
            resolve(ajaxRequest(url));
        }
    });
}

function func_2(data)
{
    return new Promise(function(resolve, reject){
        if(condition)
        {
            resolve('2');
        }
        else
        {
            console.log(data.response);
            resolve(ajaxRequest(url));
        }
    });
}

function func_3(data)
{
    return new Promise(function(resolve, reject){
        if(condition)
        {
            resolve('3');
        }
        else
        {
            console.log(data.response);
            resolve(ajaxRequest(url));
        }
    });
}

func_1().then(func_2).then(func_3).then(function(data){});

これifは、データが localStorage/sessionStorage にキャッシュされているかどうかを確認することです。キャッシュされている場合、関数は単に結果を返します。ただし、値がキャッシュされているかどうかわからない状況 (たとえば、スクリプトの最初の実行) では、値を連鎖させてから、後続の各関数で前の結果を localStorage/sessionStorage に永続化する予定です (したがって、promise連鎖最後の行に）。最後thenに、 からのデータを永続化する機会が与えられますfunc_3。

私が実行したテストに基づいて、すべてが正常に機能しているように見えますが、これがこれを行うための最良の方法であるかどうか疑問に思っていましたか? また、リストされている 3 つの関数の 1 つ以上で発生する可能性のある AJAX エラーをどのように処理すればよいでしょうか?

注: 私のAjaxRequest関数も同じ Promise メカニズムを使用し、成功時に完全な XHR を「解決」し、失敗/エラー時に同じ完全な XHR を「拒否」します。

編集

@Bergi からのヒントの後、コードを次のように更新しました (同様に機能します)。

function func_1()
{
    if(condition)
    {
        return Promise.resolve('1');
    }
    else
    {
        console.log('start');
        return ajaxRequest(url);
    }
}

function func_2(data)
{
    if(condition)
    {
        return Promise.resolve('2');
    }
    else
    {
        console.log(data.response);
        return ajaxRequest(url);
    }
}

function func_3(data)
{
    if(condition)
    {
        return Promise.resolve('3');
    }
    else
    {
        console.log(data.response);
        return ajaxRequest(url);
    }
}

func_1().then(func_2).then(func_3).then(function(data){})['catch'](function(err){console.log(err)});
4

1 に答える 1

3

すべてが正常に機能しているように見えますが、これがこれを行うための最良の方法であるかどうか疑問に思っていましたか?

Promise最低レベル (つまり、その ajax リクエストを約束するとき) を除いて、コンストラクターを実際に使用する必要はありません。関数は、次のように単純に記述する必要があります。

function func_1() {
    if (condition) {
        return Promise.resolve('1');
    } else {
        console.log('start');
        retrun ajaxRequest(url);
    }
}

厳密に言えば、func_2andfunc_3でさえできるかもしれませんがreturn '2'、thenそれらをコールバックとして使用するメソッドはそれに対処できます。もちろん、常に promise オブジェクトを返す方がクリーンです。

また、リストされている 3 つの関数の 1 つ以上で発生する可能性のある AJAX エラーをどのように処理すればよいでしょうか?

2 番目の関数を に渡すthenか、 を使用しますcatch。このコールバックは、promise が拒否されたときに呼び出され、例外を処理する必要があります。

于 2014-12-04T19:28:46.660 に答える