vue-promise介紹和使用

 

 

 　　Promise能解決上面回調地獄引起的代碼可讀性特別差的問題，記住！promise並不會說有什么特別額外的功能，他就是把上面這種層層回調的代碼變得結構清晰，可讀性變高；

　　為什么promise能使用其可讀性變高呢？平時進行ajax異步請求和回調函數時是耦合在一起的，因此有時候看起來特別不美觀，而promise就把異步請求和回調函數中的代碼進行了分離，看如下代碼：

　　未使用promise前：

$.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
});     

　　使用promise后：

  new Promise((resolve, reject) => {
    //執行異步請求
    $.get("test.cgi", {
        name: "John",
        time: "2pm"
      },
      function (data) {
        resolve(data)
      });
  }).then(data => {
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
    alert("Data Loaded: " + data);
  })

　　稍微解析下，resolve和reject都是函數，當執行resolve函數時，相當調用后面的then方法，resolve傳入什么參數，then就可接受什么參數；reject函數會調用catch方法，上面沒有寫，一般是請求成功就調用resolve進而then處理，失敗調用reject進而catch處理。

　　我們發現，異步請求的代碼放在了new Promise（），回調函數要處理的代碼放在的then()，這就實現了異步請求和回調后的處理代碼的分離。promise可以理解成是對 異步操作的一個封裝，僅僅是封裝，別想太多了，異步請求和回調該咋執行還咋執行。