Đợi cho đến khi tất cả các lời hứa hoàn thành ngay cả khi một số bị từ chối

Giả sử tôi có một bộ Promises đang thực hiện các yêu cầu mạng, trong đó một yêu cầu sẽ thất bại:

// 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   

Hãy nói rằng tôi muốn đợi cho đến khi tất cả những điều này kết thúc, bất kể nếu một lần thất bại. Có thể có lỗi mạng đối với tài nguyên mà tôi có thể sống mà không có, nhưng nếu tôi có thể nhận được, tôi muốn trước khi tiếp tục. Tôi muốn xử lý các lỗi mạng một cách duyên dáng.

Vì Promises.allkhông để lại bất kỳ chỗ nào cho việc này, mô hình được đề xuất để xử lý việc này là gì, mà không sử dụng thư viện hứa hẹn?

Cập nhật, bạn có thể muốn sử dụng bản địa tích hợp Promise.allSettled:

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

Như một sự thật thú vị, câu trả lời dưới đây là nghệ thuật trước khi thêm phương pháp đó vào ngôn ngữ:]

Chắc chắn, bạn chỉ cần một reflect:

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

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

Hoặc với 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);
});

Hoặc trong ví dụ của bạn:

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");
});

Câu trả lời tương tự, nhưng thành ngữ hơn cho ES6 có lẽ:

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>

Tùy thuộc vào loại (các) giá trị được trả về, lỗi thường có thể được phân biệt đủ dễ dàng (ví dụ: sử dụng undefinedcho "không quan tâm", typeofcho các giá trị không phải đối tượng đơn giản result.message, result.toString().startsWith("Error:")v.v.)

Câu trả lời của Benjamin cung cấp một sự trừu tượng tuyệt vời để giải quyết vấn đề này, nhưng tôi đã hy vọng cho một giải pháp ít trừu tượng hơn. Cách rõ ràng để giải quyết vấn đề này là chỉ cần gọi .catchcác lời hứa nội bộ và trả lại lỗi từ cuộc gọi lại của họ.

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

Tiến lên một bước nữa, bạn có thể viết một trình xử lý bắt chung chung trông như thế này:

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

sau đó bạn có thể làm

> 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 } ]

Vấn đề với điều này là các giá trị bị bắt sẽ có giao diện khác với các giá trị không bị bắt, do đó, để làm sạch điều này, bạn có thể làm một cái gì đó như:

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

Vì vậy, bây giờ bạn có thể làm điều này:

> 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!' ]

Sau đó, để giữ cho nó KHÔ, bạn có được câu trả lời của Benjamin:

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

bây giờ nó trông như thế nào

> 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!' ]

Lợi ích của giải pháp thứ hai là trừu tượng hóa và DRY. Nhược điểm là bạn có nhiều mã hơn, và bạn phải nhớ để phản ánh tất cả các lời hứa của bạn để làm cho mọi thứ nhất quán.

Tôi sẽ mô tả giải pháp của mình là rõ ràng và HÔN, nhưng thực sự kém mạnh mẽ hơn. Giao diện không đảm bảo rằng bạn biết chính xác lời hứa thành công hay thất bại.

Ví dụ bạn có thể có cái này:

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

Điều này sẽ không bị bắt bởi a.catch, vì vậy

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

Không có cách nào để biết cái nào gây tử vong và cái nào không. Nếu điều đó quan trọng thì bạn sẽ muốn thực thi và giao diện theo dõi xem nó có thành công hay không (điều reflectnày).

Nếu bạn chỉ muốn xử lý lỗi một cách duyên dáng, thì bạn chỉ có thể coi lỗi là các giá trị không xác định:

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

Trong trường hợp của tôi, tôi không cần biết lỗi hoặc lỗi như thế nào - tôi chỉ quan tâm liệu tôi có giá trị hay không. Tôi sẽ để chức năng tạo ra lời hứa lo lắng về việc ghi lại lỗi cụ thể.

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

Bằng cách đó, phần còn lại của ứng dụng có thể bỏ qua lỗi của nó nếu muốn và coi nó là một giá trị không xác định nếu muốn.

Tôi muốn các chức năng cấp cao của mình thất bại một cách an toàn và không lo lắng về các chi tiết về lý do tại sao các phụ thuộc của nó không thành công và tôi cũng thích KISS hơn DRY khi tôi phải thực hiện sự đánh đổi đó - đó là lý do cuối cùng tôi chọn không sử dụng reflect.

Đã có một đề xuất hoàn chỉnh cho một chức năng có thể thực hiện điều này một cách tự nhiên, trong vanilla Javascript : Promise.allSettled, đã đưa nó đến giai đoạn 4, được chính thức hóa trong ES2020 và được triển khai trong mọi môi trường hiện đại . Nó rất giống với reflectchức năng trong câu trả lời khác này . Đây là một ví dụ, từ trang đề xuất. Trước đây, bạn sẽ phải làm:

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');

Sử dụng Promise.allSettledthay thế, ở trên sẽ tương đương với:

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

Những người sử dụng môi trường hiện đại sẽ có thể sử dụng phương pháp này mà không cần bất kỳ thư viện nào . Trong đó, đoạn mã sau sẽ chạy mà không gặp sự cố:

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

Đầu ra:

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

Đối với các trình duyệt cũ hơn, có một polyfill tuân thủ thông số kỹ thuật ở đây .

Tôi thực sự thích câu trả lời của Benjamin, và về cơ bản, anh ấy biến tất cả các lời hứa thành những quyết định luôn luôn giải quyết nhưng đôi khi có lỗi với kết quả như thế nào. :)
Đây là nỗ lực của tôi theo yêu cầu của bạn chỉ trong trường hợp bạn đang tìm kiếm giải pháp thay thế. Phương pháp này chỉ đơn giản coi các lỗi là kết quả hợp lệ và được mã hóa tương tự như Promise.allsau:

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;
    }
});

Các Promise.allsẽ nuốt bất kỳ lời hứa từ chối và lưu trữ các lỗi trong một biến, vì vậy nó sẽ trở lại khi tất cả những lời hứa đã được giải quyết. Sau đó, bạn có thể ném lại lỗi, hoặc làm bất cứ điều gì. Bằng cách này, tôi đoán bạn sẽ nhận được từ chối cuối cùng thay vì từ chối đầu tiên.

Tôi đã có cùng một vấn đề và đã giải quyết nó theo cách sau:

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

Trong trường hợp đó, Promise.allsẽ chờ mọi lời hứa sẽ đến resolvedhoặc rejectedtrạng thái.

Và có giải pháp này, chúng tôi đang "dừng catchthực thi" theo cách không chặn. Trên thực tế, chúng tôi không dừng lại bất cứ điều gì, chúng tôi chỉ quay trở lại Promisetrạng thái chờ xử lý sẽ trả lại trạng thái khác Promisekhi giải quyết sau khi hết thời gian.

Điều này phải phù hợp với cách Q thực hiện :

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,
        }))));
    };
}

Tất nhiên câu trả lời của Benjamin Gruenbaum là tuyệt vời ,. Nhưng tôi cũng có thể thấy quan điểm của Nathan Hagen với mức độ trừu tượng có vẻ mơ hồ. Có các thuộc tính đối tượng ngắn như e & vkhông giúp được gì, nhưng tất nhiên điều đó có thể thay đổi.

Trong Javascript có đối tượng Lỗi tiêu chuẩn, được gọi là Error. Lý tưởng nhất là bạn luôn ném một ví dụ / hậu duệ của việc này. Ưu điểm là bạn có thể làm được instanceof Error, và bạn biết có gì đó không ổn.

Vì vậy, sử dụng ý tưởng này, đây là vấn đề của tôi.

Về cơ bản bắt lỗi, nếu lỗi không thuộc loại Lỗi, hãy bọc lỗi bên trong một đối tượng Lỗi. Mảng kết quả sẽ có các giá trị được giải quyết hoặc các đối tượng Lỗi mà bạn có thể kiểm tra.

Ví dụ bên trong sản phẩm khai thác, trong trường hợp bạn sử dụng một số thư viện bên ngoài có thể đã làm reject("error"), thay vì reject(new Error("error")).

Tất nhiên bạn có thể có những lời hứa là bạn đã giải quyết một lỗi, nhưng trong trường hợp đó rất có thể sẽ có ý nghĩa để coi đó là một lỗi dù sao, như ví dụ cuối cùng cho thấy.

Một lợi thế khác của việc này, việc hủy mảng được giữ đơn giản.

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

Thay vì

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

Bạn có thể lập luận rằng việc !error1kiểm tra đơn giản hơn một ví dụ, nhưng bạn cũng phải hủy cả hai 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();

Thay vì từ chối, giải quyết nó với một đối tượng. Bạn có thể làm một cái gì đó như thế này khi bạn đang thực hiện lời hứa

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

Tôi nghĩ rằng các tiêu chuẩn sau một cách tiếp cận hơi khác nhau ... so sánh fn_fast_fail()với fn_slow_fail()... mặc dù sau này không thất bại như vậy ... bạn có thể kiểm tra nếu một hoặc cả hai avà blà một thể hiện của Errorvà throwrằng Errornếu bạn muốn nó tầm các catchkhối (ví dụ if (b instanceof Error) { throw b; }). Xem 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

Đây là tùy chỉnh của tôi 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;
  });
};

So với Promise.all

• Nếu tất cả các lời hứa được giải quyết, nó sẽ thực hiện chính xác như tiêu chuẩn.

• Nếu một trong những lời hứa bị từ chối, nó sẽ trả về lời hứa đầu tiên bị từ chối giống như lời hứa tiêu chuẩn nhưng không giống như nó chờ đợi tất cả các lời hứa sẽ giải quyết / từ chối.

Đối với những người dũng cảm, chúng ta có thể thay đổi Promise.all():

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

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

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

CẨN THẬN . Nói chung, chúng tôi không bao giờ thay đổi các phần dựng sẵn, vì nó có thể phá vỡ các thư viện JS không liên quan khác hoặc xung đột với các thay đổi trong tương lai đối với các tiêu chuẩn JS.

My settledPromisealltương thích ngược với Promise.allvà mở rộng chức năng của nó.

Những người đang phát triển các tiêu chuẩn - tại sao không đưa điều này vào một tiêu chuẩn Hứa mới?

Promise.allvới việc sử dụng hiện đại async/awaittiếp cận

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

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

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

Tôi sẽ làm:

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

Bạn có thể thực hiện logic của mình một cách tuần tự thông qua nsynjs thực thi đồng bộ . Nó sẽ tạm dừng trên mỗi lời hứa, chờ giải quyết / từ chối và gán kết quả của độ phân giải cho thuộc datatính hoặc ném ngoại lệ (để xử lý rằng bạn sẽ cần khối thử / bắt). Đây là một ví dụ:

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>

Tôi đã sử dụng các mã sau kể từ 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);
                }
            });
        });
    });
};

Chữ ký sử dụng là như thế Promise.all. Sự khác biệt chính là Promise.waitsẽ chờ đợi tất cả những lời hứa sẽ hoàn thành công việc của họ.

Tôi biết rằng câu hỏi này có rất nhiều câu trả lời và tôi chắc chắn phải (nếu không phải tất cả) là chính xác. Tuy nhiên, thật khó cho tôi để hiểu logic / dòng chảy của những câu trả lời này.

Vì vậy, tôi đã xem Triển khai ban đầu Promise.all()và tôi đã cố gắng bắt chước logic đó - ngoại trừ việc không dừng thực thi nếu một Lời hứa thất bại.

  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;
  }

Giải thích:
- Lặp lại đầu vào promisesListvà thực hiện từng Lời hứa.
- Không có vấn đề nếu Lời hứa được giải quyết hoặc bị từ chối: lưu kết quả của Lời hứa trong một resultmảng theo index. Lưu cả trạng thái giải quyết / từ chối ( isSuccess).
- Khi tất cả các Lời hứa đã hoàn thành, hãy trả lại một Lời hứa với kết quả của tất cả các Lời hứa khác.

Ví dụ sử dụng:

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
*/

Tôi không biết thư viện hứa hẹn nào bạn đang sử dụng, nhưng hầu hết đều có thứ gì đó giống như tất cả .

Chỉnh sửa: Ok vì bạn muốn sử dụng ES6 đơn giản mà không có thư viện bên ngoài, không có phương pháp như vậy.

Nói cách khác: Bạn phải lặp lại các lời hứa của mình một cách thủ công và giải quyết một lời hứa kết hợp mới ngay khi tất cả các lời hứa được giải quyết.