如何用 Promise 自定義一個 GET 請求的函數

寫在最前面

• 近期 review 本身之前的代碼的時候，看到 promise 的使用方法，用的比較模糊。含義不清，用法凌亂，這裏從新溫習一下基礎知識。
• 下面是👇新鮮出爐的下篇文章，結合 async 來讓 promise 更好貼合咱們的場景使用。
• 結合 async 異步函數 - 提升 Promise 的易用性

前言

• JavaScript 是單線程工做，可是瀏覽器是多線程的。爲了更好的完成咱們程序的任務。Promise 異步的操做就由此誕生了。
• 一個 Promise 就是一個表明了異步操做最終完成或者失敗的結果對象。

怎麼使用？

語法

• 基本

new Promise( function(resolve, reject) {...} /* executor */  );
複製代碼

Promise 構造函數包含一個參數和一個帶有 resolve（解析）和 reject（拒絕）兩個參數的回調。 在回調中執行一些操做（例如異步），若是一切都正常，則調用 resolve，不然調用 reject。

• then 的使用

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error:"It broke"
});
複製代碼

then() 包含兩個參數：一個用於成功情形的回調和一個用於失敗情形的回調。 這兩個皆可選，所以您能夠只添加一個用於成功情形或失敗情形的回調。

主要的 promise 的三個方法

Promise.all

- 這個方法返回一個新的promise對象，該promise對象在iterable參數對象裏全部的promise對象都成功的時候纔會觸發成功，一旦有任何一個iterable裏面的promise對象失敗則當即觸發該promise對象的失敗。這個新的promise對象在觸發成功狀態之後，會把一個包含iterable裏全部promise返回值的數組做爲成功回調的返回值，順序跟iterable的順序保持一致；若是這個新的promise對象觸發了失敗狀態，它會把iterable裏第一個觸發失敗的promise對象的錯誤信息做爲它的失敗錯誤信息。Promise.all方法常被用於處理多個promise對象的狀態集合。

Promise.reject

- 返回一個狀態爲失敗的Promise對象，並將給定的失敗信息傳遞給對應的處理方法。

return Promise.reject(error);

Promise.resolve

- 返回一個狀態由給定value決定的Promise對象。若是該值是thenable(即，帶有then方法的對象)，返回的Promise對象的最終狀態由then方法執行決定；不然的話(該value爲空，基本類型或者不帶then方法的對象),返回的Promise對象狀態爲fulfilled，而且將該value傳遞給對應的then方法。一般而言，若是你不知道一個值是不是Promise對象，使用Promise.resolve(value) 來返回一個Promise對象,這樣就能將該value以Promise對象形式使用。

怎麼建立一個 Promise

• Promise 對象是由關鍵字 new 及其構造函數來建立的。

const myFirstPromise = new Promise((resolve, reject) => {
  // ?作一些異步操做，最終會調用下面二者之一:
  //
  // resolve(someValue); // fulfilled
  // ?或
  // reject("failure reason"); // rejected
});
複製代碼

• 想讓某個函數擁有 Promise 功能？讓他放回一個 Promise 對象就能夠了：

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};
複製代碼

Demo: 1 -- 建立一個 GET 請求的簡單函數

function get(url) {
  // 返回一個 promise 對象.
  return new Promise(function(resolve, reject) {
    // 建立一個 XML 對象
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      
      if (req.status == 200) {
        // 請求 200的時候處理 response 
        resolve(req.response);
      }
      else {
        // 處理請求錯誤信息
        reject(Error(req.statusText));
      }
    };

    // 處理網絡錯誤信息
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // 發送請求
    req.send();
  });
}
複製代碼

• 如今咱們來使用吧

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})
複製代碼

Demo: 2 -- 建立一個圖片上傳的 Promise 函數

function imgLoad(url) {
    //建立一個圖片上傳的 Promise() constructor;
    return new Promise(function(resolve, reject) {
      
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'blob';
     
      request.onload = function() {
        if (request.status === 200) {
        
          resolve(request.response);
        } else {
        
          reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
        }
      };
      request.onerror = function() {
     
          reject(Error('There was a network error.'));
      };
      
      request.send();
    });
  }

  // 掛載到 body 上面去
  var body = document.querySelector('body');
  var myImage = new Image();
  
  // 使用
  imgLoad('myLittleVader.jpg').then(function(response) {
   
    //第一步 處理 resolve() method.
    var imageURL = window.URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
    
  }, function(Error) {
  
    // 處理錯誤
    console.log(Error);
  });
複製代碼

下篇文章

• 新鮮出爐的下篇文章寫好，結合 async 來讓 promise 更好貼合咱們的場景使用。
• 結合 async 異步函數 - 提升 Promise 的易用性

參考

• MDN-Promise
• Google-Develop