學習 ECMAScript/JavaScript 6 - Promise 學習六步

let promise2 = new Promise(function(
        will_goto_then, // 跳到 then 的標記名稱
        will_goto_catch // 跳到 catch 的標記名稱
    )
    { // 同步執行區塊開始
        console.log('promise2 同步工作內容');

        will_goto_catch(); // 等同步執行區塊結束後，跳到 catch
        will_goto_then();  // 等同步執行區塊結束後，跳到 then
        // 此例看似先執行 will_goto_catch() 再執行 will_goto_then()
        // 但其實只處理第一個跳躍標記。故只跳到 catch

        console.log('這行之後的內容會先跑完，最後才跳到 then 或 catch');
    } // 同步執行區塊結束
);

// executor 提供跳到 then 和 catch 的引數，故可用 .then/.catch 撰寫後續工作。
promise2
.then(()=>{
    console.log('then: 從 promise2 的 will_goto_then 跳過來了');
})
.catch(()=>{
    console.log('catch: 從 promise2 的 will_goto_catch 跳過來了');
});

console.log('end');

let promise3 = new Promise(function(
        resolve // 跳到 then 的標記. 省略跳到 catch 標記
    )
    { // 同步執行區塊開始
        console.log('promise3 同步工作內容');

        let x = 1;
        console.log('let x = 1');
        resolve(x); // 等同步執行區塊結束後，跳到 then 並帶一個引數 x
        // resolve(x) 會形成一個閉包，保存 x 此時的狀態。

        x = 2;
        console.log('let x = 2');
        resolve(x); // 這個 resolve 會被忽略

        console.log('這行之後的內容會先跑完，才跳到 then 或 catch');
    } // 同步執行區塊結束
);

promise3
.then(x =>{
    console.log('從 promise3 的 resolve 跳過來了，x 為 ', x);
});

console.log('end');

// 多個有順序依賴性的 promise 工作，可以這樣寫。
// 但工作愈多，巢狀愈深，結構不好看。
new Promise(done => {
    console.log('promise4a 同步工作內容');
    done('A');
})
.then(v => {
    console.log('end promise4a.');

    new Promise(done => {
        console.log('promise4b 同步工作內容', v);
        done(v + 'B');
    })
    .then(v => {
        console.log('end promise4b.', v);

        new Promise(done => {
            done();
        })
        .then(_ => {
            new Promise(done => {
                done();
            })
            .then(_ => {
                console.log('last');
            });
        });
    });
});

// 改成 return 下一個 promise ，就可以簡化巢狀結構，更好串接。
(new Promise(done => {
    console.log('promise4c 同步工作內容');
    done('C');
}))
.then(v => {
    console.log('end promise4c.');

    return new Promise(done => {
        console.log('promise4d 同步工作內容', v);
        done(v + 'D')
    });
})
.then(v => {
    console.log('end promise4d.', v);

    return new Promise(done => {
        done();
    });
})
.then(_ => {
    return new Promise(done => {
        done();
    });
})
.then(_ => {
    console.log('last');
});

console.log('end');

Promise.all(
    [
        new Promise(done => {
            console.log('promise5a 同步工作內容');
            done('A');
        }),
        new Promise(done => {
            console.log('promise5b 同步工作內容');
            done('B');
        }),
        new Promise(done => {
            console.log('promise5c 同步工作內容');
            done('C');
        }),
    ]
)
.then(results => {
    console.log('all done. values: ', results);
})
.catch(_ => {
    console.log('one of promise is failure.')
});

console.log('end');

// 跑一個 同步函數 job
function MyPromise1(job)
{
    console.log('其他工作1');
    return new Promise((resolve, reject) => {
        // 這裡用的標記名稱分別是 resolve 和 reject
        if (job()) {
            resolve();
        }
        else {
            reject();
        }
    });
}

MyPromise1(_=>true)
.then(_=>{
    console.log('my promise1 then');
})
.catch(_=>{
    console.log('my promise1 catch');
})

// 包裝一個非同步工作，例如 XMLHttpRequest
function MyPromise2(url)
{
    let promise = new Promise((done, fail) => {
        // 這裡用的標記名稱分別是 done 和 fail
        let xhr = new XMLHttpRequest();

        xhr.addEventListener('load', _ => {
            if (Number(xhr.status) >= 400) {
                // 拿不到資料，跳到 catch
                fail(xhr);
            }
            else {
                // 成功拿到資料才跳到 then
                done(xhr.responseText);
            }
        });

        xhr.addEventListener('error', _ => {
            // 網址錯誤或禁止使用，跳到 catch
            console.log("request error");
            fail(xhr);
        });

        xhr.open('GET', url);
        xhr.send();
    });
    return promise;
}

MyPromise2('promise1.html')
.then(response => {
    console.log('my promise2 get', response.substring(0, 40));
})
.catch(request => {
    console.log('my promise2 catch', request.status);
})

Promise.all([MyPromise2('promise2.html'), MyPromise2('promise3.html')])
.then(results => {
    console.log('全部都成功', results.length);
})
.catch(_ => {
    console.log('其中一個失敗了');
});