Promise詳解

時間 2019-11-24

標籤 promise 詳解简体版

原文原文鏈接

一、什麼是promise
Promise是異步執行能夠解決回調地域
二、promise的做用和應用場景
      做用：異步執行解決回調地域（函數一層一層的嵌套，致使不知道執行到哪一步了，而咱們須要執行某層函數的時候跳出來執行）
      應用：基本上都是帶有這種onload特性的，就是我去幹一件事等一下子之後我再去執行，如img.onload=function(){}，以及promise的ajax等。
      promise的其餘應用：事件loop（異步過程當中也是有分別的，好比setTimeout是一種異步，promise也是一種異步，他們的區別在哪，面試很重要）

同步：//同步執行    一步一步的向下執行
            當前DOM元素還未加載完成
            例：<script src="./js/a.js"></script>
                  <script src="./js/a.js"></script>
      <body>
             //DOM元素
      </body>
異步：//異步執行    各自執行執行完後各自去處理
             當前DOM元素所有加載完了（執行完了），可是img和link這些尚未加載完，只是標籤都加載完了
            例：<script src="./js/a.js"></script>
                  <script src="./js/a.js" async defer></script>
      <body>
             //DOM元素
      </body>
async 表示js加載完成後就執行，不會停下來，而是直接向後繼續運行(body)，但此時可能body中還有些東西b.js調用不了，這時候就用到了defer。
defer 表示頁面中全部的DOM元素都已經加載完成（包括圖片），再執行。

async和defer解決異步的缺陷：
同時異步加載多張圖片或者同時異步加載多個js文件會形成暫時性假死，會卡頓，致使全部css的link鏈接還有全部圖片將會中止加載，並且假死完成後不恢復；因而有了promise

三、promise的基本使用

var promise=new Promise(function(resolve,reject){
       var img=new Image();
       img.src="img/3.jpg";
//一旦執行了resolve或者是reject就不會再執行了另外一個了
       img.onload=function(){
           resolve(img);        //resolve是指加載成功時執行
       };
       img.onerror=function(){
           reject("加載錯誤") //reject是指加載失敗時執行
       }
})

四、promise的then 方法：

//then中的兩個參數：fn1表明執行成功的函數resolve，fn2表明執行失敗的函數reject
//promise.then(fn1(),fn2())}
          promise.then(fn1(img){
              console.log(img); //img參數是resolve中傳過來的參數
          },fn2(txt){
               console.log(txt);   // txt參數是reject中傳過來的錯誤提示字符串
          })}

promise吃相好一點的寫法：

     function loadImg(_src){
          return new Promise(function(res,rej){
                var img=new Image();
                img.src=_src;
                img.onload=function(){
                    res(img);
                };
                img.onerror=function(){
                    rej("加載錯誤");
                }
            });
    }

        loadImg("./img/3-.jpg").then(function(img){
            console.log(img);
        }).catch(function(){
            //catch函數中的函數就是reject執行的內容
        })

五、Promise鏈式加載

        var arr=[];
        //Promise鏈式加載
        loadImg("./img/3-.jpg").then(function(img){
            arr.push(img);
            return loadImg("./img/4-.jpg");
            // .then中返回以前咱們定義的promise，這時出去後依然能夠繼續使用 .then方法去繼續加載新的圖片
        }).then(function(img){
            arr.push(img);
            return loadImg("./img/5-.jpg");
        }).then(function(img){
            arr.push(img);
            return loadImg("./img/6-.jpg");
        }).then(function(img){
            arr.push(img);
            console.log(arr);
        })

六、Promise中的promise.all()方法：

     var arr=[];
        for(var i=3;i<80;i++){
            arr.push(loadImg("img/"+i+"-.jpg"));
     }
    //所有加載完成後         並且加載時是按照前後順序加載的，不會亂序
    Promise.all(arr).then(function(list){
       list.forEach(function(item){
           console.log(item.src);
       })
    })
七、Promise中的promise.race()方法：

    //誰先加載進來就是誰
    Promise.race(arr).then(function(img){
        console.log(img);
    })

八、Promise中的promise.resolve()方法：

     Promise.resolve().then(function(){

     })
     // 等同於下兩句話

     var pro=new Promise(function(res,rej){
         res();
     })
     pro.then(function(){

     })
九、Promise中的promise.reject方法：

    Promise.reject().then(function(){

    })
    // 等同於下兩句話

    var pro=new Promise(function(res,rej){
        rej();
    })
    pro.catch(function(){

    })css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。