Merangkai Janji async dengan 1 tekad dan 1 penolakan?

Anda dapat menulis ulang solusi Anda terhadap janji secara harfiah:

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

Namun, itu masih sangat buruk. Saya lebih suka membalikkan if/elses sebagai langkah pertama:

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

Namun kemudian kami juga dapat menghapus sarang callback ini. Biasanya hal ini tidak mungkin dilakukan saat Anda melakukan percabangan dengan if, namun dalam kasus ini satu-satunya hasil alternatif adalah penolakan, seperti throwing, dan tidak akan menjalankan panggilan balik then yang dirantai.

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

Sekarang Anda dapat membuat test tersebut mengeluarkan pengecualian itu sendiri sehingga Anda tidak memerlukan if lagi, dan Anda dapat memindahkan pernyataan console.log('rejecting...'); ke dalam .catch().

Dan meskipun menurut saya ini hanya contoh Anda yang semua langkahnya terlihat sama, Anda juga dapat dengan mudah membuat rantai janji secara dinamis dari daftar:

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

Karena waktu Anda monoton, dan "pekerjaan" Anda sudah ditentukan sebelumnya, saya akan memfaktorkan ulang kode untuk menggunakan setInterval() dengan konteks untuk melacak "pekerjaan" atau "langkah" yang diperlukan. Faktanya, Anda bahkan tidak harus menggunakan Promise saat melakukannya, meskipun Anda masih bisa, dan jika Anda ingin menangani rantai lebih lanjut, ada baiknya:

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
}

Fungsi tersebut dapat dipanggil "secara langsung" dengan pengendali penyelesaian/penolakan, atau digunakan sebagai argumen konstruktor Janji.

Lihat contoh lengkap di JSFiddle yang dimodifikasi.

Untuk mengatasi komentar terlalu banyak boilerplate Bergi, kode dapat ditulis dengan lebih ringkas, tanpa perlu login:

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
}

Pertama, mari kita atur ulang pernyataan pembuka dengan sangat halus agar mencerminkan penggunaan janji yang lebih umum dan lebih tepat.

Alih-alih :

sebuah fungsi yang harus melakukan sesuatu yang asinkron, dalam beberapa langkah

Katakanlah :

sebuah fungsi yang harus melakukan sesuatu dalam beberapa langkah asinkron

Jadi, pertama-tama kita mungkin memilih untuk menulis sebuah fungsi yang mengeksekusi rantai janji dan mengembalikan janji yang dihasilkannya:

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

Dan, demi demonstrasi, kita dapat menulis doSomethingAsync() sedemikian rupa sehingga mengembalikan janji yang memiliki peluang 50:50 untuk diselesaikan: ditolak (yang lebih berguna di sini daripada penundaan):

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

Lalu, bagian inti dari pertanyaannya:

kapan gagalnya?

mungkin dapat diulangi:

kapan gagal?

yang merupakan pertanyaan yang lebih realistis karena kita biasanya akan memanggil proses asinkron yang pengaruhnya kecil terhadap kita (proses tersebut mungkin berjalan di beberapa server di tempat lain di dunia), dan yang kita harap akan berhasil tetapi mungkin gagal secara acak. Jika ya, kode kami (dan/atau pengguna akhir kami) ingin mengetahui kode mana yang gagal, dan alasannya.

Dalam kasus doAnAsyncSequence(), kita dapat melakukannya sebagai berikut:

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

Meskipun tidak ada pernyataan console.log() di doAnAsyncSequence() atau doSomethingAsync() :

• pada kesuksesan, kita dapat mengamati hasil keseluruhannya (yang akan selalu menjadi "tiga" dalam contoh ini).
• jika terjadi kesalahan, kita tahu persis langkah async mana yang menyebabkan proses gagal ("satu", "dua" atau "tiga").

Cobalah

Jadi itulah teorinya.

Untuk menjawab pertanyaan spesifik (seperti yang saya pahami) ...

untuk doSomethingAsync(), tulis :

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

untuk doAnAsyncSequence(), tulis :

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

Dan panggil sebagai berikut:

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