ES6 Promise 用法
用多了異步回調函數,起初看Promise也是一頭霧水....其實也很簡單:
由淺入深先看下面:
Promise其實是一個構造函數; 用new操作符; Promise接收一個函數作為參數;先不看resolve和reject;
在這裏只想說明一點的是:new 一個Promise之後 ,promise中的函數的代碼會自動運行;(打開瀏覽器試試)
但是更多的是做一些異步操作,而不是直接輸出console.log(" ");
說來說去這到底跟resovle,和reject這兩個有啥關系呢,我們可以用了幹嘛?
再看:
先來說一下:Promise對象上有 then,catch和all三大方法
第三個截圖中:我們寫了一個resolve("代表一個數據");其實現在可以大概明白,resovle是我們自己定義的
這一步可以先總結一下:就是then函數中的函數參數,可以接收promise中的數據(resolve的,或reject的);比如你可以在Promise中$.get({ })一個後端數據,然後把後端返回的數據放到resolve中(或者reject中) ;在我看來,resovle和reject沒有區別(都說了什麽狀態是成功是失敗,寫reject,還是寫resolve是右你自己決定的);只是then接收的時候有區別
為了理解resovle和reject是自己定義的我們看看下圖就明白了:
(我們把p這個Promise封裝在一個函數中,等到想要的時候再調用, 因為文章前面說了, new一個Promise會馬上被執行..)
函數asy接收參數num;如果num<10 就調用resolve( );否則認為是reject的數據; 接收結果分別在then的兩個函數中;
Promise的then方法還可以返回一個promise(),這樣可以鏈式調用;
比如 promise_a.then().then();每個then都會接收前面promise返回的數據;
promise.catch().會捕捉前面promise產生的異常.而不至於程序真正報錯,像 try...catch那樣;
下面說說promise的重頭戲: 意思是把所有的異步請求集合到一起,得到結果...
Promise.all( ) : 不說了,看代碼就明白:
function asy1(num) { var p = new Promise(function (resolve, reject) { //做一些異步操作 if (num < 10) { setTimeout(function () { resolve("數據正常 asy1....") }, 2000); }else{ reject("數據異常asy1....") } }) return p; } function asy2(num) { var p = new Promise(function (resolve, reject) { //做一些異步操作 if (num < 10) { setTimeout(function () { resolve("數據正常 asy2....") }, 2000); }else{ reject("asy2....") } }) return p; } function asy3(num) { var p = new Promise(function (resolve, reject) { //做一些異步操作 if (num < 10) { setTimeout(function () { resolve("數據正常 asy3....") }, 2000); }else{ reject("asy3....") } }) return p; }
Promise.all([asy3(7),asy3(8),asy3(9)]).then( res=>{console.log(res)})
現在的理解就這麽多,夠用以後再發現問題;
ES6 Promise 用法