ทำลายโซ่สัญญาและเรียกใช้ฟังก์ชันตามขั้นตอนในห่วงโซ่ที่ขาด (ปฏิเสธ)

อัปเดต:

เพื่อช่วยผู้ชมโพสต์นี้ในอนาคตฉันได้สร้างตัวอย่างคำตอบของ plumaนี้

คำถาม:

เป้าหมายของฉันค่อนข้างตรงไปตรงมา

  step(1)
  .then(function() {
    return step(2);
  }, function() {
    stepError(1);
    return $q.reject();
  })
  .then(function() {

  }, function() {
    stepError(2);
  });

  function step(n) {
    var deferred = $q.defer();
    //fail on step 1
    (n === 1) ? deferred.reject() : deferred.resolve();
    return deferred.promise;
  }
  function stepError(n) {
    console.log(n); 
  }

ปัญหาคือถ้าฉันล้มเหลวในขั้นตอนที่ 1 ทั้งstepError(1)AND stepError(2)จะถูกไล่ออก ถ้าฉันไม่ทำreturn $q.rejectก็stepError(2)จะไม่ถูกไล่ออก แต่step(2)จะซึ่งฉันเข้าใจ ฉันทำทุกอย่างสำเร็จยกเว้นสิ่งที่ฉันพยายามทำ

ฉันจะเขียนคำสัญญาเพื่อเรียกใช้ฟังก์ชันเมื่อปฏิเสธโดยไม่เรียกฟังก์ชันทั้งหมดในห่วงโซ่ข้อผิดพลาดได้อย่างไร หรือมีวิธีอื่นที่จะทำสิ่งนี้ให้สำเร็จ?

นี่คือการสาธิตสดเพื่อให้คุณมีบางอย่างที่ใช้ได้ผล

อัปเดต:

ผมชนิดของการมีการแก้ไขมัน ที่นี่ฉันกำลังตรวจจับข้อผิดพลาดที่ส่วนท้ายของห่วงโซ่และส่งข้อมูลไปยังreject(data)เพื่อที่ฉันจะได้รู้ว่าต้องจัดการปัญหาใดในฟังก์ชันข้อผิดพลาด สิ่งนี้ไม่ตรงตามความต้องการของฉันเพราะฉันไม่ต้องการขึ้นอยู่กับข้อมูล มันจะง่อย แต่ในกรณีของฉันมันจะดีกว่าที่จะส่งการเรียกกลับข้อผิดพลาดไปยังฟังก์ชันแทนที่จะขึ้นอยู่กับข้อมูลที่ส่งคืนเพื่อกำหนดสิ่งที่ต้องทำ

สาธิตสดที่นี่ (คลิก)

step(1)
  .then(function() {
    return step(2);
  })
  .then(function() {
    return step(3);
  })
  .then(false, 
    function(x) {
      stepError(x);
    }
  );
  function step(n) {
    console.log('Step '+n);
    var deferred = $q.defer();
    (n === 1) ? deferred.reject(n) : deferred.resolve(n);
    return deferred.promise;
  }
  function stepError(n) {
    console.log('Error '+n); 
  }

สาเหตุที่รหัสของคุณไม่ทำงานตามที่คาดไว้คือจริงๆแล้วมันทำอะไรบางอย่างที่แตกต่างจากที่คุณคิด

สมมติว่าคุณมีสิ่งต่อไปนี้:

stepOne()
.then(stepTwo, handleErrorOne)
.then(stepThree, handleErrorTwo)
.then(null, handleErrorThree);

เพื่อให้เข้าใจสิ่งที่เกิดขึ้นได้ดีขึ้นลองแกล้งทำเป็นรหัสซิงโครนัสกับtry/ catchบล็อก:

try {
    try {
        try {
            var a = stepOne();
        } catch(e1) {
            a = handleErrorOne(e1);
        }
        var b = stepTwo(a);
    } catch(e2) {
        b = handleErrorTwo(e2);
    }
    var c = stepThree(b);
} catch(e3) {
    c = handleErrorThree(e3);
}

onRejectedจัดการ (อาร์กิวเมนต์ที่สองของthen) เป็นหลักกลไกการแก้ไขข้อผิดพลาด (เช่นcatchบล็อก) หากมีข้อผิดพลาดเกิดขึ้นข้อผิดพลาดhandleErrorOneจะถูกจับโดยบล็อกจับถัดไป ( catch(e2)) และอื่น ๆ

เห็นได้ชัดว่านี่ไม่ใช่สิ่งที่คุณตั้งใจไว้

สมมติว่าเราต้องการให้ห่วงโซ่ความละเอียดทั้งหมดล้มเหลวไม่ว่าจะเกิดอะไรขึ้น:

stepOne()
.then(function(a) {
    return stepTwo(a).then(null, handleErrorTwo);
}, handleErrorOne)
.then(function(b) {
    return stepThree(b).then(null, handleErrorThree);
});

หมายเหตุ: เราสามารถออกจากhandleErrorOneที่ที่มันอยู่ได้เพราะมันจะถูกเรียกใช้ก็ต่อเมื่อถูกstepOneปฏิเสธเท่านั้น (มันเป็นฟังก์ชันแรกในห่วงโซ่ดังนั้นเราจึงรู้ว่าหากโซ่ถูกปฏิเสธ ณ จุดนี้อาจเป็นได้เพราะสัญญาของฟังก์ชันนั้นเท่านั้น) .

การเปลี่ยนแปลงที่สำคัญคือตัวจัดการข้อผิดพลาดสำหรับฟังก์ชันอื่น ๆ ไม่ได้เป็นส่วนหนึ่งของห่วงโซ่สัญญาหลัก แต่ละขั้นตอนจะมี "ห่วงโซ่ย่อย" ของตัวเองonRejectedซึ่งจะเรียกเฉพาะเมื่อขั้นตอนนั้นถูกปฏิเสธ (แต่ไม่สามารถเข้าถึงได้โดยห่วงโซ่หลักโดยตรง)

เหตุผลนี้ได้ผลคือทั้งสองonFulfilledและonRejectedเป็นอาร์กิวเมนต์เสริมสำหรับthenวิธีการ หากสัญญาสำเร็จ (กล่าวคือได้รับการแก้ไข) และถัดไปthenในห่วงโซ่ไม่มีonFulfilledตัวจัดการโซ่จะดำเนินต่อไปจนกว่าจะมีตัวจัดการดังกล่าว

ซึ่งหมายความว่าสองบรรทัดต่อไปนี้เทียบเท่า:

stepOne().then(stepTwo, handleErrorOne)
stepOne().then(null, handleErrorOne).then(stepTwo)

แต่บรรทัดต่อไปนี้ไม่เทียบเท่ากับสองข้อด้านบน:

stepOne().then(stepTwo).then(null, handleErrorOne)

ไลบรารีคำสัญญาของ Angular $qขึ้นอยู่กับQไลบรารีของ kriskowal (ซึ่งมี API ที่สมบูรณ์กว่า แต่มีทุกสิ่งที่คุณสามารถค้นหาได้$q) เอกสาร APIของ Q บน GitHub สามารถพิสูจน์ได้ว่ามีประโยชน์ Q ใช้ข้อมูลจำเพาะของสัญญา / A +ซึ่งจะกล่าวถึงรายละเอียดthenว่าพฤติกรรมการแก้ปัญหาสัญญาทำงานอย่างไรและอย่างไร

แก้ไข:

นอกจากนี้โปรดทราบว่าหากคุณต้องการแยกออกจากห่วงโซ่ในตัวจัดการข้อผิดพลาดของคุณจำเป็นต้องส่งคืนสัญญาที่ถูกปฏิเสธหรือโยนข้อผิดพลาด (ซึ่งจะถูกจับและห่อด้วยสัญญาที่ถูกปฏิเสธโดยอัตโนมัติ) หากคุณไม่คืนคำสัญญาให้รวมthenมูลค่าที่ส่งคืนไว้ในสัญญาแก้ไขสำหรับคุณ

ซึ่งหมายความว่าหากคุณไม่ส่งคืนอะไรเลยแสดงว่าคุณกำลังส่งคืนสัญญาที่ได้รับการแก้ไขแล้วสำหรับมูลค่าundefinedนั้น

ไปงานปาร์ตี้ช้าไปหน่อย แต่วิธีง่ายๆนี้ใช้ได้ผลสำหรับฉัน:

function chainError(err) {
  return Promise.reject(err)
};

stepOne()
.then(stepTwo, chainError)
.then(stepThreee, chainError);

วิธีนี้ช่วยให้คุณหลุดออกจากโซ่ได้

สิ่งที่คุณต้องการคือ.then()โซ่ซ้ำพร้อมกรณีพิเศษในการเริ่มต้นและกรณีพิเศษที่จะเสร็จสิ้น

ความสามารถพิเศษคือการรับหมายเลขขั้นตอนของกรณีความล้มเหลวเพื่อกระเพื่อมไปยังตัวจัดการข้อผิดพลาดขั้นสุดท้าย

• เริ่มต้น: โทรstep(1)โดยไม่มีเงื่อนไข
• รูปแบบการทำซ้ำ: เชื่อมต่อ.then()กับการเรียกกลับต่อไปนี้:
  • ความสำเร็จ: ขั้นตอนการโทร (n + 1)
  • ความล้มเหลว: โยนค่าที่การรอการตัดบัญชีก่อนหน้านี้ถูกปฏิเสธหรือสร้างข้อผิดพลาดอีกครั้ง
• เสร็จสิ้น: เชื่อมต่อ.then()โดยไม่มีตัวจัดการความสำเร็จและตัวจัดการข้อผิดพลาดขั้นสุดท้าย

คุณสามารถเขียนสิ่งทั้งหมดออกมาได้ แต่จะง่ายกว่าในการสาธิตรูปแบบด้วยฟังก์ชันทั่วไปที่มีชื่อ:

function nextStep(n) {
    return step(n + 1);
}

function step(n) {
    console.log('step ' + n);
    var deferred = $q.defer();
    (n === 3) ? deferred.reject(n) : deferred.resolve(n);
    return deferred.promise;
}

function stepError(n) {
    throw(n);
}

function finalError(n) {
    console.log('finalError ' + n);
}
step(1)
    .then(nextStep, stepError)
    .then(nextStep, stepError)
    .then(nextStep, stepError)
    .then(nextStep, stepError)
    .then(nextStep, stepError)
    .then(null, finalError);});

ดูการสาธิต

สังเกตว่าในstep()การเลื่อนเวลาถูกปฏิเสธหรือแก้ไขด้วยวิธีnใดจึงทำให้ค่านั้นพร้อมใช้งานสำหรับการเรียกกลับในลำดับถัดไป.then()ในห่วงโซ่ เมื่อstepErrorเรียกว่าข้อผิดพลาดที่ rethrown ซ้ำ ๆ finalErrorจนกว่าจะมีการจัดการโดย

เมื่อปฏิเสธคุณควรผ่านข้อผิดพลาดในการปฏิเสธจากนั้นรวมตัวจัดการข้อผิดพลาดขั้นตอนในฟังก์ชันที่ตรวจสอบว่าควรดำเนินการปฏิเสธหรือ "เปลี่ยนใหม่" จนกว่าจะสิ้นสุดห่วงโซ่:

// function mocking steps
function step(i) {
    i++;
    console.log('step', i);
    return q.resolve(i);
}

// function mocking a failing step
function failingStep(i) {
    i++;
    console.log('step '+ i + ' (will fail)');
    var e = new Error('Failed on step ' + i);
    e.step = i;
    return q.reject(e);
}

// error handler
function handleError(e){
    if (error.breakChain) {
        // handleError has already been called on this error
        // (see code bellow)
        log('errorHandler: skip handling');
        return q.reject(error);
    }
    // firs time this error is past to the handler
    console.error('errorHandler: caught error ' + error.message);
    // process the error 
    // ...
    //
    error.breakChain = true;
    return q.reject(error);
}

// run the steps, will fail on step 4
// and not run step 5 and 6
// note that handleError of step 5 will be called
// but since we use that error.breakChain boolean
// no processing will happen and the error will
// continue through the rejection path until done(,)

  step(0) // 1
  .catch(handleError)
  .then(step) // 2
  .catch(handleError)
  .then(step) // 3
  .catch(handleError)
  .then(failingStep)  // 4 fail
  .catch(handleError)
  .then(step) // 5
  .catch(handleError)
  .then(step) // 6
  .catch(handleError)
  .done(function(){
      log('success arguments', arguments);
  }, function (error) {
      log('Done, chain broke at step ' + error.step);
  });

สิ่งที่คุณเห็นบนคอนโซล:

step 1
step 2
step 3
step 4 (will fail)
errorHandler: caught error 'Failed on step 4'
errorHandler: skip handling
errorHandler: skip handling
Done, chain broke at step 4

นี่คือรหัสการทำงานบางส่วน https://jsfiddle.net/8hzg5s7m/3/

หากคุณมีการจัดการที่เฉพาะเจาะจงสำหรับแต่ละขั้นตอน Wrapper ของคุณอาจเป็นดังนี้:

/*
 * simple wrapper to check if rejection
 * has already been handled
 * @param function real error handler
 */
function createHandler(realHandler) {
    return function(error) {
        if (error.breakChain) {
            return q.reject(error);
        }
        realHandler(error);
        error.breakChain = true;
        return q.reject(error);    
    }
}

จากนั้นโซ่ของคุณ

step1()
.catch(createHandler(handleError1Fn))
.then(step2)
.catch(createHandler(handleError2Fn))
.then(step3)
.catch(createHandler(handleError3Fn))
.done(function(){
    log('success');
}, function (error) {
    log('Done, chain broke at step ' + error.step);
});

ถ้าฉันเข้าใจถูกต้องคุณต้องการให้แสดงเฉพาะข้อผิดพลาดของขั้นตอนที่ล้มเหลวใช่ไหม

นั่นควรจะง่ายพอ ๆ กับการเปลี่ยนกรณีความล้มเหลวของสัญญาแรกเป็นสิ่งนี้:

step(1).then(function (response) {
    step(2);
}, function (response) {
    stepError(1);
    return response;
}).then( ... )

โดยการกลับ$q.reject()ในกรณีความล้มเหลวในขั้นตอนแรกของคุณจะปฏิเสธสัญญาซึ่งเป็นสาเหตุ errorCallback then(...)ที่จะเรียกว่าในปีที่ 2

var s = 1;
start()
.then(function(){
    return step(s++);
})
.then(function() {
    return step(s++);
})
.then(function() {
    return step(s++);
})
.then(0, function(e){
   console.log(s-1); 
});

http://jsbin.com/EpaZIsIp/20/edit

หรืออัตโนมัติสำหรับหลายขั้นตอน:

var promise = start();
var s = 1;
var l = 3;
while(l--) {
    promise = promise.then(function() {
        return step(s++);
    });
}
promise.then(0, function(e){
   console.log(s-1); 
});

http://jsbin.com/EpaZIsIp/21/edit

ลอง ro ใช้สิ่งนี้เช่น libs:

https://www.npmjs.com/package/promise-chain-break

    db.getData()
.then(pb((data) => {
    if (!data.someCheck()) {
        tellSomeone();

        // All other '.then' calls will be skiped
        return pb.BREAK;
    }
}))
.then(pb(() => {
}))
.then(pb(() => {
}))
.catch((error) => {
    console.error(error);
});

หากคุณต้องการแก้ปัญหานี้โดยใช้ async / await:

(async function(){    
    try {        
        const response1, response2, response3
        response1 = await promise1()

        if(response1){
            response2 = await promise2()
        }
        if(response2){
            response3 = await promise3()
        }
        return [response1, response2, response3]
    } catch (error) {
        return []
    }

})()

แนบตัวจัดการข้อผิดพลาดเป็นองค์ประกอบลูกโซ่แยกโดยตรงกับการดำเนินการตามขั้นตอน:

        // Handle errors for step(1)
step(1).then(null, function() { stepError(1); return $q.reject(); })
.then(function() {
                 // Attach error handler for step(2),
                 // but only if step(2) is actually executed
  return step(2).then(null, function() { stepError(2); return $q.reject(); });
})
.then(function() {
                 // Attach error handler for step(3),
                 // but only if step(3) is actually executed
  return step(3).then(null, function() { stepError(3); return $q.reject(); });
});

หรือใช้catch():

       // Handle errors for step(1)
step(1).catch(function() { stepError(1); return $q.reject(); })
.then(function() {
                 // Attach error handler for step(2),
                 // but only if step(2) is actually executed
  return step(2).catch(function() { stepError(2); return $q.reject(); });
})
.then(function() {
                 // Attach error handler for step(3),
                 // but only if step(3) is actually executed
  return step(3).catch(function() { stepError(3); return $q.reject(); });
});

หมายเหตุ: นี่เป็นรูปแบบเดียวกับที่pluma แนะนำในคำตอบของเขาแต่ใช้การตั้งชื่อของ OP

พบPromise.prototype.catch()ตัวอย่างใน MDNด้านล่างที่มีประโยชน์มาก

(คำตอบที่ได้รับการยอมรับกล่าวถึงthen(null, onErrorHandler)ซึ่งโดยพื้นฐานแล้วจะเหมือนกับcatch(onErrorHandler))

การใช้และการผูกมัดวิธีการจับ

var p1 = new Promise(function(resolve, reject) {
  resolve('Success');
});

p1.then(function(value) {
  console.log(value); // "Success!"
  throw 'oh, no!';
}).catch(function(e) {
  console.log(e); // "oh, no!"
}).then(function(){
  console.log('after a catch the chain is restored');
}, function () {
  console.log('Not fired due to the catch');
});

// The following behaves the same as above
p1.then(function(value) {
  console.log(value); // "Success!"
  return Promise.reject('oh, no!');
}).catch(function(e) {
  console.log(e); // "oh, no!"
}).then(function(){
  console.log('after a catch the chain is restored');
}, function () {
  console.log('Not fired due to the catch');
});

Gotchas เมื่อโยนข้อผิดพลาด

// Throwing an error will call the catch method most of the time
var p1 = new Promise(function(resolve, reject) {
  throw 'Uh-oh!';
});

p1.catch(function(e) {
  console.log(e); // "Uh-oh!"
});

// Errors thrown inside asynchronous functions will act like uncaught errors
var p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    throw 'Uncaught Exception!';
  }, 1000);
});

p2.catch(function(e) {
  console.log(e); // This is never called
});

// Errors thrown after resolve is called will be silenced
var p3 = new Promise(function(resolve, reject) {
  resolve();
  throw 'Silenced Exception!';
});

p3.catch(function(e) {
   console.log(e); // This is never called
});

หากได้รับการแก้ไข

//Create a promise which would not call onReject
var p1 = Promise.resolve("calling next");

var p2 = p1.catch(function (reason) {
    //This is never called
    console.log("catch p1!");
    console.log(reason);
});

p2.then(function (value) {
    console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
    console.log(value); /* calling next */
}, function (reason) {
    console.log("next promise's onRejected");
    console.log(reason);
});

ทางออกที่ดีที่สุดคือการปรับโครงสร้างให้เข้ากับห่วงโซ่สัญญาของคุณเพื่อใช้ ES6 ที่รอคอย จากนั้นคุณสามารถกลับจากฟังก์ชั่นเพื่อข้ามพฤติกรรมที่เหลือได้

ฉันตีหัวตัวเองกับรูปแบบนี้มานานกว่าหนึ่งปีแล้วและการใช้การรอคอยคือสวรรค์

หากเมื่อใดก็ตามที่คุณกลับมาPromise.reject('something')คุณจะถูกโยนเข้าไปในด่านจับตามคำสัญญา

promiseOne
  .then((result) => {
    if (!result) {
      return Promise.reject('No result');
    }
    return;
  })
  .catch((err) => {
    console.log(err);
  });

หากคำสัญญาแรกไม่ส่งกลับผลลัพธ์ใด ๆ คุณจะได้รับ'ไม่มีผลลัพธ์'ในคอนโซลเท่านั้น

ใช้โมดูล SequentialPromise

ความตั้งใจ

จัดเตรียมโมดูลที่มีความรับผิดชอบในการดำเนินการตามลำดับในขณะที่ติดตามดัชนีปัจจุบันของแต่ละการดำเนินการตามลำดับ กำหนดการดำเนินการในรูปแบบคำสั่งเพื่อความยืดหยุ่น

ผู้เข้าร่วม

• บริบท : อ็อบเจ็กต์ที่เมธอดสมาชิกดำเนินการ
• SequentialPromise : กำหนดexecuteวิธีการเชื่อมโยงและติดตามแต่ละการดำเนินการ SequentialPromise ส่งคืน Promise-Chain จากการดำเนินการทั้งหมดที่ดำเนินการ
• Invoker : สร้างอินสแตนซ์ SequentialPromise จัดเตรียมบริบทและการดำเนินการและเรียกexecuteใช้เมธอดในขณะที่ส่งรายการลำดับตัวเลือกสำหรับแต่ละการดำเนินการ

ผลที่ตามมา

ใช้ SequentialPromise เมื่อจำเป็นต้องมีพฤติกรรมตามลำดับของการแก้ปัญหาตามสัญญา SequentialPromise จะติดตามดัชนีที่ Promise ถูกปฏิเสธ

การนำไปใช้

clear();

var http = {
    get(url) {
        var delay = Math.floor( Math.random() * 10 ), even = !(delay % 2);
        var xhr = new Promise(exe);

        console.log(`REQUEST`, url, delay);
        xhr.then( (data) => console.log(`SUCCESS: `, data) ).catch( (data) => console.log(`FAILURE: `, data) );

        function exe(resolve, reject) {
            var action = { 'true': reject, 'false': resolve }[ even ];
            setTimeout( () => action({ url, delay }), (1000 * delay) );
        }

        return xhr;
    }
};

var SequentialPromise = new (function SequentialPromise() {
    var PRIVATE = this;

    return class SequentialPromise {

        constructor(context, action) {
            this.index = 0;
            this.requests = [ ];
            this.context = context;
            this.action = action;

            return this;
        }

        log() {}

        execute(url, ...more) {
            var { context, action, requests } = this;
            var chain = context[action](url);

            requests.push(chain);
            chain.then( (data) => this.index += 1 );

            if (more.length) return chain.then( () => this.execute(...more) );
            return chain;
        }

    };
})();

var sequence = new SequentialPromise(http, 'get');
var urls = [
    'url/name/space/0',
    'url/name/space/1',
    'url/name/space/2',
    'url/name/space/3',
    'url/name/space/4',
    'url/name/space/5',
    'url/name/space/6',
    'url/name/space/7',
    'url/name/space/8',
    'url/name/space/9'
];
var chain = sequence.execute(...urls);
var promises = sequence.requests;

chain.catch( () => console.warn(`EXECUTION STOPPED at ${sequence.index} for ${urls[sequence.index]}`) );

// console.log('>', chain, promises);

ส่วนสำคัญ

SequentialPromise