ES6要點總結（3）-Promise非同步編程解決方案

Promise是ES6中新增的非同步編程解決方案，體現在代碼中它是一個對象，可以通過 Promise 構造函數來實例化。
其最基本的使用 new Promise(function(resolve,reject){})  傳兩個參數resolve和reject 然後再邏輯里返回resolve和reject

它有兩個原型方法
Promise.prototype.then()
Promise.prototype.catch()
兩個常用的靜態方法
Promise.all()
Promise.resolve()

//一：原型方法
const imgs = [
    'http://wap.cmread.com/tingmedia/lingxi/image/head/default_head_logo.png',
    'http://wap.cmread.com/tingmedia//image/1/55/72.jpg',
    'http://wap.cmread.com/tingmedia//image/1/55/72.jpg'
];
var p=new Promise(function(resolve,reject){
    var img=new Image();
    img.src='http://wap.cmread.com/tingmedia//image/1/55/72.jpg';
    img.onload=function () {
        resolve(this);
    }
    img.onerror=function(){
        reject('載入失敗')
    }
})
p.then(function (res) {
    console.log('載入成功');
    document.body.appendChild(res)
}).catch(function (error) {
    console.log('載入失敗'+error)
})
//封裝非同步處理對象
function loadImg(url) {
    var promise=new Promise(function (resolve,reject) {
        var img=new Image();
        img.src=url;
        img.onload=function () {
            resolve(this)
        };
        img.onerror=function () {
            reject('載入失敗')
        }
    });
    return promise
}
loadImg(imgs[0]).then(function (res) {
    document.body.appendChild(res)
})
//二：靜態方法
//Promise.all()能將多個promise對象包裝成一個新的promise對象，
//當所有promise對象都返回resolve時候，Promise.all（）才返回resolve，此時所有resolve組成一個數組，返回給then中的resolve
//如果有一個返回reject則返回reject,並且把這個rejec返回給Promise.all的reject
var allDone=Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2])])  //P要大寫
allDone.then(function (res) {
    res.forEach(function (item,index) { //很多時候這個順序不能錯
        document.write(index);
        document.body.appendChild(item)
    })
})
//Promise.resolve()
//如果參數是promise對象則原封不動的返回promise對象
Promise.resolve(loadImg(imgs[0])).then(function (res) {
    console.log(111);
    document.body.appendChild(res)
})
//如果參數是對象，則立即會把這個對象變成promise對象，然後執行then方法
Promise.resolve({
    then(resolve,reject){
        const img=new Image();
        img.src=imgs[0];
        img.onload=function () {
            resolve(this)
        }
    }
}).then(function(res){
    document.body.appendChild(res);
    console.log(222)
})