回調函數之基本的Promise

在 JavaScript 中，全部的代碼都是單線程的，所謂的回調函數就是爲了處理一些異步的操做。而多層的回調函數嵌套是一種比較古老的處理方式，這種代碼的弊端顯而易見，結構混亂、代碼冗餘，而 Promise 的出現就很好的解決了這個問題；

基本 Promise

function fn(n) {
    return new Promise(function(resolve, reject) {
        var nubmer = 0.5;
        if (n > nubmer) {
            resolve('greater than 0.5s')
        } else {
            reject('less than 0.5s')
        }
    })
}

var p = fn(Math.random());
p.then((res) => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

鏈式調用

var p = new Promise((resolve, reject) => {
    console.log('start new Promise...');
    resolve(10);
})
// 0.5秒後返回input*input的計算結果:
function multiply(input) {
    return new Promise(function(resolve, reject) {
        console.log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve(input * input), 500);
    });
}

// 0.5秒後返回input+input的計算結果:
function add(input) {
    return new Promise(function(resolve, reject) {
        console.log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve(input + input), 500);
    });
}
p.then(multiply).then(add).then(res => {
    console.log('Got value: ' + res);
}).catch(e => {
    console.log(e);
})

// 獲得結果
start new Promise...
calculating 10 x 10...
calculating 100 + 100...
Got value: 200

Promise 封裝 Ajax

// ajax函數將返回Promise對象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function(resolve, reject) {
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}
// 調用 
var p = ajax('GET', url).then(function(text) { // 若是AJAX成功，得到響應內容
    console.log(text);
}).catch(function(status) { // 若是AJAX失敗，得到響應代碼
    console.log('ERROR: ' + status);
});