promise處理多個相互依賴的異步請求(實例講解)

2019-11-19 15:54:52

字體：大中小

來源：轉載

供稿：網友

在項目中，經常會遇到多個相互依賴的異步請求。如有a,b,c三個ajax請求，b需要依賴a返回的數據，c又需要a和b請求返回的數據。如果采用請求嵌套請求的方式自然是不可取的。導致代碼難以維護，如何請求很多。會出現很多問題。

Promise就是解決多個異步請求的問題。 Promise是ES6提供的一個對象，用來傳遞異步操作的消息。

Promise有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。

直接上代碼。有a,b請求，b依賴a的請求數據。如下：

function a(){      return new Promise(function(res,rej){        $.ajax({          url:"a",          type: "GET",          async:true,          dataType:"json",          success:function(data){            console.log(data,"a");            res(data);          }        })      });    }    function b(data){      console.log(data,"data");      return new Promise(function(res,rej){        $.ajax({            url:"b",            type: "POST",            async:true,            data:JSON.stringify(data),            dataType:"json",            success:function(data){              console.log(data,"b");              res();            }          })      });    }    $("#btn").click(function(){      a().then(function (data){        b(data);      }).then(function(){      })    })

接口url在網上找了一個，可以看運行結果：