Promise

異步使用場景：

setTimeout, setInverval, 事件綁定，圖片加載，Ajax請求等

 

在不少時候咱們的js中， 好比 B須要依賴A, C又須要依賴B，。。。。

這時候咱們很無奈的一步一步的使用回調函數來解決此類問題。  若是這樣多起來，回調會越嵌套越深。

工做中很常見的是 B接口須要A接口的返回值之類的，就只能在A執行完在回調B接口了。

 

可是這種寫法太不利於讀寫和錯誤排查和剖出了。

因而隨着咱們的ES6出現了一個很是好用的 Promise 對象，完美的解決了這一問題

 今天咱們來看下Promise,

下面咱們一塊兒來看下語法：

 

好，咱們按照語法寫一個小例子：

 1 function loadImg(src){
 2         const promise = new Promise(function(resolve, reject){
 3             var img = new Image();
 4 //            throw new Error("自定義錯誤");
 5             img.onload = function(){
 6                 resolve(img)
 7             };
 8             img.onerror = function(){
 9                 reject("圖片加載失敗");
10             }
11             img.src = src;
12         })
13         return promise;
14     }
15     var url = "https://www.imooc.com/static/img/common/logo.png";
16     var url2 = "https://img1.mukewang.com/szimg/583e42fb0001e04f05400300-360-202.jpg";
17     var result = loadImg(url);
18     var result2 = loadImg(url2);
19     /* 用法一
20      * 串聯調用 
21      * catch統一輸出錯誤，不用每次寫到then的第二個回調裏面
22      * */
23     result.then(function(img){
24         console.log(img.width)
25         return result2;
26     }).then(function(img){
27         console.log(img.width)
28     }).catch(function(e){
29         console.log(e)
30     });
31     /**
32      * 用法二：
33      * 都執行完才執行回調 
34      * 返回全部執行的結果，是一個數組
35      */
36     Promise.all([result, result2]).then(function(datas){
37         console.log("all", datas[0].width);
38         console.log("all", datas[1].width)
39     });
40     
41     /*
42      * 用法三
43      * 有一個執行完就執行
44      * 返回第一個執行完的結果
45      * */
46     Promise.race([result, result2]).then(data=>{
47         console.log('race', data.width)
48     });

試着敲一遍，你能夠把loadImg當作是一個 Ajax請求，

大概語法啊就這些，這些用法。 不明白的在看看文檔對promise的解釋吧  -^_ ^- 

這是我本身看事後總結的。