การผูกมัด async สัญญาด้วย 1 แก้ไขและ 1 ปฏิเสธ?

คุณสามารถเขียนวิธีแก้ปัญหาของคุณใหม่เพื่อให้สัญญาได้อย่างแท้จริง:

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

function clickSpeed() {
    if ( test('one') ) {
        return sleep(500).then(function() {
            if ( test('two') ) {
                return sleep(500).then(function() {
                    if ( test('three') ) {
                        return sleep(500).then(function() {
                            console.log('resolving...');
                        });
                    }
                    console.log('rejecting...');
                    return Promise.reject();
                });
            }
            console.log('rejecting...');
            return Promise.reject();
        });
    }
    console.log('rejecting...');
    return Promise.reject();
}

อย่างไรก็ตาม นั่นยังค่อนข้างน่าเกลียดอยู่ ฉันอยากจะย้อนกลับ if/elses เป็นขั้นตอนแรก:

function clickSpeed() {
    if (!test('one')) {
        console.log('rejecting...');
        return Promise.reject();
    }
    return sleep(500).then(function() {
        if (!test('two')) {
            console.log('rejecting...');
            return Promise.reject();
        }
        return sleep(500).then(function() {
            if (!test('three')) {
                console.log('rejecting...');
                return Promise.reject();
            }
            return sleep(500).then(function() {
                console.log('resolving...');
            });
        });
    });
}

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

function clickSpeed() {
    return Promise.resolve() // only so that the callbacks look alike, and to use throw
    .then(function() {
        if (!test('one')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500);
    }).then(function() {
        if (!test('two')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500)
    }).then(function() {
        if (!test('three')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500);
    }).then(function() {
        console.log('resolving...');
    });
}

ตอนนี้คุณสามารถทำให้ tests เหล่านั้นส่งข้อยกเว้นได้เอง ดังนั้นคุณไม่จำเป็นต้องใช้ if อีกต่อไป และคุณสามารถย้ายคำสั่ง console.log('rejecting...'); ใน .catch() ได้

และในขณะที่ฉันเดาว่านี่เป็นเพียงตัวอย่างของคุณที่ทุกขั้นตอนเหมือนกัน คุณสามารถสร้าง Promise Chain แบบไดนามิกได้อย่างง่ายดายจากรายการเช่นกัน:

function clickSpeed() {
    return ['one', 'two', 'three'].reduce(function(p, cur) {
        return p.then(function() {
            if (!test(cur))
                throw new Error('rejecting...');
            else
                return sleep(500);
        });
    }, Promise.resolve());
}

เนื่องจากจังหวะเวลาของคุณเป็นแบบโมโนโทน และ "งาน" ของคุณถูกกำหนดไว้ล่วงหน้าแล้ว ฉันจึงปรับโครงสร้างโค้ดใหม่เพื่อใช้ setInterval() พร้อมบริบทเพื่อติดตาม "งาน" หรือ "ขั้นตอน" ที่จำเป็น ในความเป็นจริง คุณ มี ที่จะใช้ Promise เมื่อทำเช่นนั้น แม้ว่าคุณจะยังสามารถทำได้ และหากคุณต้องการ chain handlers เพิ่มเติม เป็นความคิดที่ดี:

function clickSpeed(resolve, reject) {
  var interval = setInterval(function(work) {
    try {
      var current = work.shift();
      if(!test(current)) { // Do current step's "work"
        clearInterval(interval); // reject on failure and clear interval
        console.log('rejecting...', current);
        reject();
      }
      else if(!work.length) { // If this was the last step
        clearInterval(interval); // resolve (success!) and clear interval
        console.log('resolving...');
        resolve();
      }
    }
    catch(ex) { // reject on exceptions as well
      reject(ex);
      clearInterval(interval);
    }
  }, 500, ['one', 'two', 'three']); // "work" array
}

ฟังก์ชันนี้สามารถเรียกว่า "โดยตรง" ด้วยตัวจัดการการแก้ไข/ปฏิเสธ หรือใช้เป็นอาร์กิวเมนต์ของ Constructor ของ Promise

ดูตัวอย่างแบบเต็มใน JSFiddle ที่แก้ไขแล้ว

เพื่อจัดการกับความคิดเห็น สำเร็จรูปมากเกินไป ของ Bergi คุณสามารถเขียนโค้ดได้กระชับยิ่งขึ้นโดยไม่ต้องบันทึก:

function clickSpeed(resolve, reject) {
    function done(success, val) {
        clearInterval(interval);
        success ? resolve(val) : reject(val);
    }

    var interval = setInterval(function(work) {
        try {
            if(test(work.shift()) || done(false)) {
                work.length || done(true);
            }
        }
        catch(ex) { // reject on exceptions as well
            done(false, ex);
        }
    }, 500, ['one', 'two', 'three']); // "work" array
}

ขั้นแรก เราจะจัดเรียงคำกล่าวเปิดใหม่อย่างละเอียดเพื่อให้สะท้อนถึงการใช้คำสัญญาที่เป็นแบบฉบับและเหมาะสมยิ่งขึ้น

แทน :

ฟังก์ชั่นที่ต้องดำเนินการ บางอย่างแบบอะซิงก์ ในไม่กี่ขั้นตอน

สมมติว่า:

ฟังก์ชั่นที่ต้องทำบางอย่างในขั้นตอนอะซิงก์ไม่กี่ขั้นตอน

ดังนั้นก่อนอื่นเราอาจเลือกที่จะเขียนฟังก์ชันที่ดำเนินการตามสัญญาและส่งคืนผลลัพธ์ที่สัญญาไว้:

function doAnAsyncSequence() {
    return Promise.resolve()
    .then(function() {
        doSomethingAsync('one');
    })
    .then(function() {
        doSomethingAsync('two');
    })
    .then(function() {
        doSomethingAsync('three');
    });
}

และเพื่อการสาธิต เราสามารถเขียน doSomethingAsync() โดยให้ส่งคืนสัญญาที่มีโอกาส 50:50 ที่จะได้รับการแก้ไข:ถูกปฏิเสธ (ซึ่งมีประโยชน์มากกว่าที่นี่มากกว่าความล่าช้า):

function doSomethingAsync(x) {
    return new Promise(function(resolve, reject) {
        if(Math.random() > 0.5 ) {
            resolve(x);
        } else {
            reject(x); // importantly, this statement reports the input argument `x` as the reason for failure, which can be read and acted on where doSomethingAsync() is called.
        }
    });
}

จากนั้นคำถามหลักก็คือ:

เมื่อไหร่มันจะล้มเหลว?

อาจถูกเรียบเรียงใหม่:

มันล้มเหลวเมื่อไหร่?

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

ในกรณีของ doAnAsyncSequence() เราสามารถทำได้ดังนี้:

doAnAsyncSequence().then(function(result) {
    console.log(result); // if this line executes, it will always log "three", the result of the *last* step in the async sequence.
}, function(reason) {
    console.log('error: ' + reason);
});

แม้ว่าจะไม่มีคำสั่ง console.log() ใน doAnAsyncSequence() หรือ doSomethingAsync() :

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

ลองดู

นั่นคือทฤษฎี

เพื่อตอบคำถามเฉพาะเจาะจง (ตามที่ฉันเข้าใจ) ...

สำหรับ doSomethingAsync() เขียน:

function test_(value, delay) {
    return new Promise(function(resolve, reject) {
        //call your own test() function immediately
        var result = test(value);
        // resolve/reject the returned promise after a delay
        setTimeout(function() {
            result ? resolve() : reject(value);
        }, delay);
    });
}

สำหรับ doAnAsyncSequence() เขียน:

function clickSpeed() {
    var delayAfterTest = 500;
    return Promise.resolve()
    .then(function() {
        test_('one', delayAfterTest);
    })
    .then(function() {
        test_('two', delayAfterTest);
    })
    .then(function() {
        test_('three', delayAfterTest);
    });
}

และโทรดังนี้:

clickSpeed().then(function() {
    console.log('all tests passed');
}, function(reason) {
    console.log('test sequence failed at: ' + reason);
});