ES6中promise的使用方法

 先看看ES5中異步編程的使用。

let ajax = function (callBlack) {
  setTimeout(function () {
    callBlack && callBlack()
  }, 1000);
}
ajax(function () {
  console.log(1)
});

 在ES6中使用Promise來解決異步編程。

let ajax = function () {
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 1000);
  })
}
ajax().then(function () {
  console.log(1);
})

 有多個步驟，讓異步編程更加簡單。

let ajax = function () {
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 1000);
  })
}
ajax().then(function () {
  console.log(1);
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 2000);
  })
}).then(function () {
  console.log(2)
});

 在Promise中可以使用catch來捕獲異常。

let ajax = function (num) {
  return new Promise(function (reslove, reject) {
    if (num > 1) {
      reslove();
      return;
    }
    throw new Error("錯誤");
  })
}
ajax(0).then(function () {
  console.log("正確");
}).catch(function (err) {
  console.log(err);
});

 下面是一個案例，目的是當頁面的圖片都加載完才把圖片顯示到頁面中，如果其中有一個出錯了就不顯示。

function loading(src) {
  return new Promise((resolve, reject) => {
    let img = document.createElement("img");
    img.src = src;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function (err) {
      reject(err)
    }
  })
}

function showimg(imgs) {
  imgs.forEach(function (img) {
    document.body.appendChild(img);
  });
}
Promise.all([
  loading("./img/banner01.jpg"),
  loading("./img/banner02.jpg")
]).then(showimg);

 下面這個例子是當圖片先加載的先顯示出來，沒加載的就不再顯示了。

function loading(src) {
  return new Promise((resolve, reject) => {
    let img = document.createElement("img");
    img.src = src;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function (err) {
      reject(err)
    }
  })
}

function showimg(imgs) {
  let p = document.createElement("p");
  p.appendChild(imgs)
  document.body.appendChild(p);
}
Promise.race([
  loading("./img/banner01.jpg"),
  loading("./img/banner02.jpg")
]).then(showimg);