js中的promise使用

// 0.5秒后返回input*input的計算結果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的計算結果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

運行結果： 

start new Promise...

calculating 123 x 123...

calculating 15129 + 15129...

calculating 30258 x 30258...

calculating 915546564 + 915546564...

Got value: 1831093128

 

代碼的解析： resolve 是執行成功

　　　　　　reject 是執行失敗

　　　　　　prototype.then()  遞延處理

　　　　　　prototype.catch()  異常捕捉

　　　　　　使用setTimeout 模擬異步

以上代碼每一步then都會執行函數中的setTimeout(resolve, 500, input * input)， 第一個參數標簽這是成功狀態執行的函數， 第二參數延時500毫秒，第三參數傳遞給下一個函數的值。

'use strict';

// 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 log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，獲得響應內容
    25     console.log(text);
},function (status) { // 如果AJAX失敗，獲得響應代碼
    console.log('ERROR: ' + status);
});

以上代碼吧AJAX異步執行函數轉換為promise對象。