Promise

1. Promise經常使用方法

   • Promise.prototype.then()

     接受兩個參數resolved 回調 rejected 回調（可選）

   • Promise.prototype.catch()

     是.then(null, rejection)或.then(undefined, rejection)的> 別名，用於指定發生錯誤時的回調函數。

   • Promise.prototype.finally()

     方法用於指定無論 Promise 對象最後狀態如何，都會執行的操做
     
   • Promise.all()
   • Promise.race()
   • Promise.resolve()

   • Promise.reject()

2. 基本用法

   // 傳入 resolve reject 參數 返回一個promise對象
    const promise = new Promise((resolve,reject) => {
    // code
    if() {
      return  resolve(value);
    }
    reject(value);
    });
    promise.then((value) => {
    // code
    }).catch((err) => {
      // code
    })

3. promise異步加載圖片

   function loadImage_Async(url) {
        return new Promise((resolve, reject) => {
          const img = new Image(100, 100); //至關於document.createElement('img')
   
          img.onload = function() {
            resolve(img);
          };
          img.onerror = function() {
            reject(new Error("File Not found!"));
          };
          img.src = url;
        });
      }
   
      window.onload = function() {
        loadImage_Async("/1.png")
          .then(img => {
            document.body.appendChild(img);
          })
          .catch(err => {
            console.log(err);
          });
      };

4. promise 封裝Ajax

   function ajax_promise(url) {
      return new Promise((resolve, reject) => {
        const handle = function() {
          if (this.readyState ===4 && this.status === 200) {
            resolve(this.response);
          }
        };
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onreadystatechange = handle;
        xhr.responseType = 'json';
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
      });
    }
    ajax_promise(url)
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
      });

原文：
ruanyifeng：Promise對象