一部が拒否されても、すべての約束が完了するまで待ちます

Promiseネットワーク要求を行っているのセットがあり、そのうちの1つが失敗するとします。

// http://does-not-exist will throw a TypeError
var arr = [ fetch('index.html'), fetch('http://does-not-exist') ]

Promise.all(arr)
  .then(res => console.log('success', res))
  .catch(err => console.log('error', err)) // This is executed   

失敗したかどうかに関係なく、これらがすべて完了するまで待機したいとします。リソースがなくても存続できるリソースにネットワークエラーがある可能性がありますが、取得できる場合は続行する前にそのエラーが必要です。ネットワークの障害を適切に処理したい。

このためのPromises.all余地はないので、promisesライブラリを使用せずにこれを処理するための推奨パターンは何ですか？

更新、おそらく組み込みのネイティブを使用したいPromise.allSettled：

Promise.allSettled([promise]).then(([result]) => {
   //reach here regardless
   // {status: "fulfilled", value: 33}
});

面白い事実として、以下のこの回答は、その方法を言語に追加する際の先行技術でした。]

もちろん、必要なのはreflect：

const reflect = p => p.then(v => ({v, status: "fulfilled" }),
                            e => ({e, status: "rejected" }));

reflect(promise).then((v => {
    console.log(v.status);
});

またはES5の場合：

function reflect(promise){
    return promise.then(function(v){ return {v:v, status: "fulfilled" }},
                        function(e){ return {e:e, status: "rejected" }});
}


reflect(promise).then(function(v){
    console.log(v.status);
});

またはあなたの例では：

var arr = [ fetch('index.html'), fetch('http://does-not-exist') ]

Promise.all(arr.map(reflect)).then(function(results){
    var success = results.filter(x => x.status === "fulfilled");
});

同様の答えですが、おそらくES6の方が慣用的です。

const a = Promise.resolve(1);
const b = Promise.reject(new Error(2));
const c = Promise.resolve(3);

Promise.all([a, b, c].map(p => p.catch(e => e)))
  .then(results => console.log(results)) // 1,Error: 2,3
  .catch(e => console.log(e));


const console = { log: msg => div.innerHTML += msg + "<br>"};

<div id="div"></div>

返される値のタイプ（複数可）に応じて、エラーが頻繁に簡単に十分な（例えば、使用を区別することができundefined、「気にしない」ためtypeof、プレーンな非オブジェクト値のためresult.message、result.toString().startsWith("Error:")など）

ベンジャミンの答えはこの問題を解決するための優れた抽象化を提供しますが、私はそれほど抽象化されていない解決策を望んでいました。この問題を解決する明示的な方法は.catch、内部のpromiseを呼び出すだけで、コールバックからエラーを返すことです。

let a = new Promise((res, rej) => res('Resolved!')),
    b = new Promise((res, rej) => rej('Rejected!')),
    c = a.catch(e => { console.log('"a" failed.'); return e; }),
    d = b.catch(e => { console.log('"b" failed.'); return e; });

Promise.all([c, d])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

Promise.all([a.catch(e => e), b.catch(e => e)])
  .then(result => console.log('Then', result)) // Then ["Resolved!", "Rejected!"]
  .catch(err => console.log('Catch', err));

これをさらに一歩進めて、次のような汎用的なキャッチハンドラを作成できます。

const catchHandler = error => ({ payload: error, resolved: false });

その後、あなたはできる

> Promise.all([a, b].map(promise => promise.catch(catchHandler))
    .then(results => console.log(results))
    .catch(() => console.log('Promise.all failed'))
< [ 'Resolved!',  { payload: Promise, resolved: false } ]

これの問題は、キャッチされた値がキャッチされていない値とは異なるインターフェースを持つことになるため、これをクリーンアップするには、次のようにします。

const successHandler = result => ({ payload: result, resolved: true });

だから今これを行うことができます：

> Promise.all([a, b].map(result => result.then(successHandler).catch(catchHandler))
    .then(results => console.log(results.filter(result => result.resolved))
    .catch(() => console.log('Promise.all failed'))
< [ 'Resolved!' ]

次に、それを乾燥状態に保つために、ベンジャミンの答えを得る：

const reflect = promise => promise
  .then(successHandler)
  .catch(catchHander)

今のところ

> Promise.all([a, b].map(result => result.then(successHandler).catch(catchHandler))
    .then(results => console.log(results.filter(result => result.resolved))
    .catch(() => console.log('Promise.all failed'))
< [ 'Resolved!' ]

2番目のソリューションの利点は、その抽象化とDRYです。欠点は、コードが増えることと、一貫性を保つためにすべての約束を反映することを忘れないことです。

私は私のソリューションを明示的かつKISSとして特徴付けますが、実際には堅牢性は低くなります。インターフェースは、promiseが成功したか失敗したかを正確に知ることを保証しません。

たとえば、次のようになります。

const a = Promise.resolve(new Error('Not beaking, just bad'));
const b = Promise.reject(new Error('This actually didnt work'));

これはに巻き込まれないa.catchので、

> Promise.all([a, b].map(promise => promise.catch(e => e))
    .then(results => console.log(results))
< [ Error, Error ]

どれが致命的で、どれがそうでなかったかを区別する方法はありません。それが重要な場合は、それが実行されたかどうかを追跡し、それを追跡および実行するインターフェースを使用する必要があります（これはreflect）。

エラーを適切に処理したい場合は、エラーを未定義の値として扱うことができます。

> Promise.all([a.catch(() => undefined), b.catch(() => undefined)])
    .then((results) => console.log('Known values: ', results.filter(x => typeof x !== 'undefined')))
< [ 'Resolved!' ]

私の場合、エラーやどのように失敗したかを知る必要はありません。値があるかどうかだけ気にします。promiseを生成する関数に、特定のエラーのログ記録について心配させます。

const apiMethod = () => fetch()
  .catch(error => {
    console.log(error.message);
    throw error;
  });

このようにして、アプリケーションの残りの部分は、必要に応じてエラーを無視し、必要に応じて未定義の値として扱うことができます。

高レベルの関数が安全に失敗し、依存関係が失敗した理由の詳細について心配しないようにしたいと思います。また、そのトレードオフを行う必要がある場合は、KISSをDRYよりも優先しますreflect。これが、最終的にを使用しないことを選択した理由です。

あり、完成提案バニラJavaScriptで、ネイティブにこれを達成することができます機能について：Promise.allSettled、ステージ4にそれを作った、ES2020にofficializedされては、とに実装されているすべての近代的な環境。これはreflect、この他の回答の関数と非常に似ています。提案ページの例です。以前は、以下を実行する必要がありました。

function reflect(promise) {
  return promise.then(
    (v) => {
      return { status: 'fulfilled', value: v };
    },
    (error) => {
      return { status: 'rejected', reason: error };
    }
  );
}

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.all(promises.map(reflect));
const successfulPromises = results.filter(p => p.status === 'fulfilled');

Promise.allSettled代わりに使用すると、上記は次と同等になります。

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
const successfulPromises = results.filter(p => p.status === 'fulfilled');

最新の環境を使用しているユーザーは、ライブラリなしでこの方法を使用できます。これらでは、次のスニペットが問題なく実行されるはずです。

Promise.allSettled([
  Promise.resolve('a'),
  Promise.reject('b')
])
  .then(console.log);

出力：

[
  {
    "status": "fulfilled",
    "value": "a"
  },
  {
    "status": "rejected",
    "reason": "b"
  }
]

古いブラウザの場合、仕様に準拠したポリフィルがここにあります。

私はベンジャミンの答えが本当に好きで、彼がどのように基本的にすべての約束を常に解決しますが、時にはエラーとして結果としての約束に変える方法が好きです。:)
あなたが代替案を探していた場合に備えて、あなたの要求に対する私の試みはここにあります。このメソッドは単にエラーを有効な結果として扱い、Promise.allそれ以外の場合と同様にコード化されています。

Promise.settle = function(promises) {
  var results = [];
  var done = promises.length;

  return new Promise(function(resolve) {
    function tryResolve(i, v) {
      results[i] = v;
      done = done - 1;
      if (done == 0)
        resolve(results);
    }

    for (var i=0; i<promises.length; i++)
      promises[i].then(tryResolve.bind(null, i), tryResolve.bind(null, i));
    if (done == 0)
      resolve(results);
  });
}

var err;
Promise.all([
    promiseOne().catch(function(error) { err = error;}),
    promiseTwo().catch(function(error) { err = error;})
]).then(function() {
    if (err) {
        throw err;
    }
});

Promise.all拒否された約束を飲み込むと約束のすべてが解決したときに、それが返されますので、変数にエラーを格納します。その後、エラーを再スローするか、何でもできます。このようにして、最初の拒否の代わりに最後の拒否を抜け出せると思います。

私は同じ問題を抱えており、次の方法でそれを解決しました：

const fetch = (url) => {
  return node-fetch(url)
    .then(result => result.json())
    .catch((e) => {
      return new Promise((resolve) => setTimeout(() => resolve(fetch(url)), timeout));
    });
};

tasks = [fetch(url1), fetch(url2) ....];

Promise.all(tasks).then(......)

その場合Promise.allすべての約束が入るresolvedか、またはrejected状態になるのを待ちます。

そして、このソリューションにより、私たちはcatchノンブロッキングの方法で「実行を停止」しています。実際、何も停止せず、タイムアウト後に解決されたときにPromise別のものを返す保留状態でを返すだけPromiseです。

これは、Qの方法と一致している必要があります。

if(!Promise.allSettled) {
    Promise.allSettled = function (promises) {
        return Promise.all(promises.map(p => Promise.resolve(p).then(v => ({
            state: 'fulfilled',
            value: v,
        }), r => ({
            state: 'rejected',
            reason: r,
        }))));
    };
}

ベンジャミン・グリューンバウムの答えはもちろん素晴らしいです。しかし、抽象化のレベルを持つNathan Hagenの視点が曖昧に見えることもわかります。のような短いオブジェクトプロパティを使用しても効果e & vはありませんが、もちろん変更することができます。

JavaScriptには、という標準のErrorオブジェクトがありますError。理想的には、常にこのインスタンスまたは子孫をスローします。利点は、あなたができることinstanceof Error、そして何かがエラーであることを知っていることです。

このアイデアを使用して、これが問題に対する私の見解です。

基本的にエラーをキャッチします。エラーのタイプがErrorでない場合は、Errorオブジェクト内でエラーをラップします。結果の配列には、解決された値、または確認できるErrorオブジェクトが含まれます。

catch内のinstanceofはreject("error")、の代わりにを実行した可能性のある外部ライブラリを使用する場合に使用しますreject(new Error("error"))。

もちろん、エラーを解決することを約束することもできますが、その場合は、最後の例が示すように、とにかくエラーとして処理することが理にかなっています。

これを行うもう1つの利点は、配列の破棄が単純に保たれることです。

const [value1, value2] = PromiseAllCatch(promises);
if (!(value1 instanceof Error)) console.log(value1);

の代わりに

const [{v: value1, e: error1}, {v: value2, e: error2}] = Promise.all(reflect..
if (!error1) { console.log(value1); }

!error1チェックはinstanceofよりも簡単であると主張することもできますが、両方を破棄する必要もありv & eます。

function PromiseAllCatch(promises) {
  return Promise.all(promises.map(async m => {
    try {
      return await m;
    } catch(e) {
      if (e instanceof Error) return e;
      return new Error(e);
    }
  }));
}


async function test() {
  const ret = await PromiseAllCatch([
    (async () => "this is fine")(),
    (async () => {throw new Error("oops")})(),
    (async () => "this is ok")(),
    (async () => {throw "Still an error";})(),
    (async () => new Error("resolved Error"))(),
  ]);
  console.log(ret);
  console.log(ret.map(r =>
    r instanceof Error ? "error" : "ok"
    ).join(" : ")); 
}

test();

拒否する代わりに、オブジェクトで解決します。あなたはpromiseを実装しているときにあなたはこのようなことをすることができます

const promise = arg => {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
        try{
          if(arg != 2)
            return resolve({success: true, data: arg});
          else
            throw new Error(arg)
        }catch(e){
          return resolve({success: false, error: e, data: arg})
        }
      }, 1000);
  })
}

Promise.all([1,2,3,4,5].map(e => promise(e))).then(d => console.log(d))

私は...以下の申し出若干異なるアプローチを考えて比較するfn_fast_fail()とfn_slow_fail()...、後者のような失敗しませんが...あなたは、1つまたは両方のかどうかを確認することができますaとbのインスタンスであるErrorとthrowことError届いて、それをしたい場合catchブロック（例えばif (b instanceof Error) { throw b; }）。jsfiddleを参照してください。

var p1 = new Promise((resolve, reject) => { 
    setTimeout(() => resolve('p1_delayed_resolvement'), 2000); 
}); 

var p2 = new Promise((resolve, reject) => {
    reject(new Error('p2_immediate_rejection'));
});

var fn_fast_fail = async function () {
    try {
        var [a, b] = await Promise.all([p1, p2]);
        console.log(a); // "p1_delayed_resolvement"
        console.log(b); // "Error: p2_immediate_rejection"
    } catch (err) {
        console.log('ERROR:', err);
    }
}

var fn_slow_fail = async function () {
    try {
        var [a, b] = await Promise.all([
            p1.catch(error => { return error }),
            p2.catch(error => { return error })
        ]);
        console.log(a); // "p1_delayed_resolvement"
        console.log(b); // "Error: p2_immediate_rejection"
    } catch (err) {
        // we don't reach here unless you throw the error from the `try` block
        console.log('ERROR:', err);
    }
}

fn_fast_fail(); // fails immediately
fn_slow_fail(); // waits for delayed promise to resolve

これが私の習慣です settledPromiseAll()

const settledPromiseAll = function(promisesArray) {
  var savedError;

  const saveFirstError = function(error) {
    if (!savedError) savedError = error;
  };
  const handleErrors = function(value) {
    return Promise.resolve(value).catch(saveFirstError);
  };
  const allSettled = Promise.all(promisesArray.map(handleErrors));

  return allSettled.then(function(resolvedPromises) {
    if (savedError) throw savedError;
    return resolvedPromises;
  });
};

に比べ Promise.all

• すべてのpromiseが解決されると、標準のpromiseとまったく同じように機能します。

• 1つ以上のプロミスが拒否された場合、標準のプロミスとほとんど同じように拒否された最初のプロミスが返されますが、すべてのプロミスが解決/拒否されるのを待ちます。

勇敢なために私たちは変えることができますPromise.all()：

(function() {
  var stdAll = Promise.all;

  Promise.all = function(values, wait) {
    if(!wait)
      return stdAll.call(Promise, values);

    return settledPromiseAll(values);
  }
})();

注意深い。他の無関係なJSライブラリを壊したり、JS標準への将来の変更と衝突したりする可能性があるため、通常、組み込みは変更しません。

私settledPromiseallは下位互換性がありますPromise.allあり、その機能を拡張しています。

標準を開発している人々-これを新しいPromise標準に含めてみませんか？

Promise.all現代的なasync/awaitアプローチを使用して

const promise1 = //...
const promise2 = //...

const data = await Promise.all([promise1, promise2])

const dataFromPromise1 = data[0]
const dataFromPromise2 = data[1]

私はします：

var err = [fetch('index.html').then((success) => { return Promise.resolve(success); }).catch((e) => { return Promise.resolve(e); }),
fetch('http://does-not-exist').then((success) => { return Promise.resolve(success); }).catch((e) => { return Promise.resolve(e); })];

Promise.all(err)
.then(function (res) { console.log('success', res) })
.catch(function (err) { console.log('error', err) }) //never executed

同期エグゼキューターnsynjsを介してロジックを順次実行できます。各プロミスで一時停止し、解決/拒否を待機して、解決の結果をdataプロパティに割り当てるか、例外をスローします（try / catchブロックが必要な処理のため）。次に例を示します。

function synchronousCode() {
    function myFetch(url) {
        try {
            return window.fetch(url).data;
        }
        catch (e) {
            return {status: 'failed:'+e};
        };
    };
    var arr=[
        myFetch("https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"),
        myFetch("https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/NONEXISTANT.js"),
        myFetch("https://ajax.NONEXISTANT123.com/ajax/libs/jquery/2.0.0/NONEXISTANT.js")
    ];
    
    console.log('array is ready:',arr[0].status,arr[1].status,arr[2].status);
};

nsynjs.run(synchronousCode,{},function(){
    console.log('done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

ES5以降、以下のコードを使用しています。

Promise.wait = function(promiseQueue){
    if( !Array.isArray(promiseQueue) ){
        return Promise.reject('Given parameter is not an array!');
    }

    if( promiseQueue.length === 0 ){
        return Promise.resolve([]);
    }

    return new Promise((resolve, reject) =>{
        let _pQueue=[], _rQueue=[], _readyCount=false;
        promiseQueue.forEach((_promise, idx) =>{
            // Create a status info object
            _rQueue.push({rejected:false, seq:idx, result:null});
            _pQueue.push(Promise.resolve(_promise));
        });

        _pQueue.forEach((_promise, idx)=>{
            let item = _rQueue[idx];
            _promise.then(
                (result)=>{
                    item.resolved = true;
                    item.result = result;
                },
                (error)=>{
                    item.resolved = false;
                    item.result = error;
                }
            ).then(()=>{
                _readyCount++;

                if ( _rQueue.length === _readyCount ) {
                    let result = true;
                    _rQueue.forEach((item)=>{result=result&&item.resolved;});
                    (result?resolve:reject)(_rQueue);
                }
            });
        });
    });
};

使用法の署名はちょうどのようPromise.allです。主な違いは、Promise.waitすべての約束が仕事を終えるのを待つことです。

この質問には多くの答えがあることを知っています。そして、すべてではないにしても、正しいはずです。しかし、これらの答えのロジック/フローを理解するのは非常に困難でした。

そこで、の元の実装を調べて、Promise.all()そのロジックを真似ようとしました。ただし、1つのPromiseが失敗した場合に実行を停止しないことを除きます。

  public promiseExecuteAll(promisesList: Promise<any>[] = []): Promise<{ data: any, isSuccess: boolean }[]>
  {
    let promise: Promise<{ data: any, isSuccess: boolean }[]>;

    if (promisesList.length)
    {
      const result: { data: any, isSuccess: boolean }[] = [];
      let count: number = 0;

      promise = new Promise<{ data: any, isSuccess: boolean }[]>((resolve, reject) =>
      {
        promisesList.forEach((currentPromise: Promise<any>, index: number) =>
        {
          currentPromise.then(
            (data) => // Success
            {
              result[index] = { data, isSuccess: true };
              if (promisesList.length <= ++count) { resolve(result); }
            },
            (data) => // Error
            {
              result[index] = { data, isSuccess: false };
              if (promisesList.length <= ++count) { resolve(result); }
            });
        });
      });
    }
    else
    {
      promise = Promise.resolve([]);
    }

    return promise;
  }

説明：
-入力promisesListをループして、各Promiseを実行します。
-Promiseが解決または拒否されたかどうかに関係なく、Promiseの結果をresultに従って配列に保存しindexます。解決/拒否ステータスも保存します（isSuccess）。
-すべてのPromiseが完了したら、他のすべての結果とともに1つのPromiseを返します。

使用例：

const p1 = Promise.resolve("OK");
const p2 = Promise.reject(new Error(":-("));
const p3 = Promise.resolve(1000);

promiseExecuteAll([p1, p2, p3]).then((data) => {
  data.forEach(value => console.log(`${ value.isSuccess ? 'Resolve' : 'Reject' } >> ${ value.data }`));
});

/* Output: 
Resolve >> OK
Reject >> :-(
Resolve >> 1000
*/

使用しているプロミスライブラリはわかりませんが、ほとんどがallSettledのようなものですます。

編集：OK、外部ライブラリなしでプレーンES6を使用したいので、そのような方法はありません。

つまり、すべてのプロミスが解決したらすぐに、プロミスを手動でループし、新しい結合されたプロミスを解決する必要があります。