Promise 異步執行的同步操作

Promise 是用來執行異步操作的。

但有時一個異步操作需要等其他的異步操作完成，這時候就可以使用then來做。

 function loadImageAsync(url) {
        return new Promise(function(resolve, reject) {
            var image = new Image();

            image.onload = function() {
                console.log("load");
                resolve(image);
            };

            image.onerror = function() {
                reject(new Error('Could not load image at ' + url));
            };
            console.log("change src");
            function init_img() {
                image.src = url;
            }
            setTimeout(init_img,2000);
        });
    }

loadImageAsync 用來異步加載圖片. setTimeout 人為地延遲2秒加載

function loadImageAsync2(url) {
        return new Promise(function(resolve, reject) {
            var image = new Image();

            image.onload = function() {
                console.log("2load");
                resolve(image);
            };

            image.onerror = function() {
                reject(new Error('Could not load image at ' + url));
            };
            console.log("2change src");
            function init_img() {
                image.src = url;
            }
            setTimeout(init_img,1000);
        });
    }

loadImageAsync2 也是用來加載圖片，人為地延遲1秒。

var p = loadImageAsync('http://img02.tooopen.com/images/20141231/sy_78327074576.jpg');
    p.then(function (img) {
        console.log("1:"+img.src);
    });
    var h = loadImageAsync2('http://img02.tooopen.com/images/20141225/sy_77944235469.jpg');
    h.then(function (img) {
        console.log("2:"+img.src);
    });

console.log("jjjjj");

第一種調用方式，分別創建promise 實例 p 和 h。

調用結果：

 

可以看到 圖片2先加載， 然后加載圖片1 。

  var s = loadImageAsync('http://img02.tooopen.com/images/20141231/sy_78327074576.jpg');
    s.then(function (img) {
        console.log("1:"+img.src);
        return loadImageAsync2('http://img02.tooopen.com/images/20141225/sy_77944235469.jpg');
    }).then(function (img) {
        console.log("2:"+img.src);
    });

創建新的promise 對象 s. 我們在s 的then 成功回調函數中 去調用 loadImageAsync2 函數。

這樣就保證了 加載圖片2 之前先加載圖片1. 

這里注意的是第二個then 其實是loadImageAsync2 返回的promise 實例調用的。

 

Promise相關學習鏈接：http://es6.ruanyifeng.com/#docs/promise