es6-promise

jackwang 發布于2019-08-21 16:43 / 1802人閱讀

摘要：是什么可以理解為一個承諾，如果調用，返回一個承諾給，然后就可以在寫計劃的時候這么寫，當返回結果的時候，就執行方案，如果沒有返回要的結果，就執行方案。這樣一來，所有的潛在風險就都在的可控范圍之內了。

promise是什么

Promise可以理解為一個承諾，如果A調用B，B返回一個承諾給A，然后A就可以在寫計劃的時候這么寫，當B返回結果的時候，A就執行方案1，如果B沒有返回A要的結果，A就執行方案2。這樣一來，所有的潛在風險就都在A的可控范圍之內了。
promise是es6解決異步編程的一種方案
通常使用的promise的有以下方法:
1、promise的構造函數
2、promise的構造函數的原型上邊的方法 then catch
3、promise的靜態方法 Promise.all Promise.resolve
每一個promise對象都會有三個狀態 pending resolve reject 狀態一旦改變就不會在變回來

promise的構造函數

新建一個promise 的時候參數為為一個函數函數為兩個參數（resolve,reject）
這兩個參數的具體內容在promise實例上邊的then 和catch里邊定義著

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    var promise=new Promise(function (resolve,reject) {
        const img=new Image();
        img.src=imgs[0];
        img.onload=function () {
            resolve(this)
        }
        img.onerror=function () {
            reject(new Error("加載失敗"))
        }
    })
    promise.then(function (img) {
        console.log("加載完成")
        document.body.appendChild(img)
    }).catch(function (error) {   //捕獲異常
        console.log(error)
    })

Promise的靜態方法 Promise.all方法

會將多個promise組實例對象生成一個新的 promise
當所有的Promise組中的實例的狀態都變成resolved Promise.all的狀態才會變成resolved 此時返回一個數組傳遞給then中的resolve函數
promise組中的實例只要有一個rejected Promise.all的狀態就會變成rejected 此時第一個被rejected的實例返回值會傳遞給catch的函數

使用Promise的靜態方法all來實現只有當一組圖片都加載完之后才向頁面中插入有一個沒有加載成功就會報錯

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    function loadImg(url) {
        var promise=new Promise(function (resolve,reject) {
            const img=new Image();
            img.src=url;
            img.onload=function () {
                resolve(this)
            }
            img.onerror=function () {
                reject(new Error("加載失敗"))
            }
        })
        return promise;
    }
    Promise.all([loadImg(imgs[0]),loadImg(imgs[1])]).then(function (datas) {
          datas.forEach(function (t) {
              document.body.appendChild(t)
          })
    }).catch(function (error) {
        console.log(error)
    })

Promise的靜態方法 Promise.resolve方法

將一個對象轉化為promise對象
有以下幾種使用方法：
1、接受promise的實例對象

 Promise.resolve(loadImg(imgs[0])).then(function (img) {
        document.body.appendChild(img)
    })

和下面的代碼實現的功能是相同的

loadImg(imgs[0]).then(function (img) {
      document.body.appendChild(img)
  })

2、接受then-able對象

   Promise.resolve({
       then(resolve,reject){
            var img=new Image();
            img.src=imgs[0];
            img.onload=function () {
                resolve(this);
            }
            img.onerror=function () {
                reject();
            }
       }
   }).then(function (img) {
       document.body.appendChild(img)
   })

3、Promise.resolve接受普通的數據類型
返回一個狀態為resolved的promise對象而且接受

  Promise.resolve("ssasa").then(function (mess) {
       console.log(mess)   //ssasa
   })

GPU云服務器云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88636.html

淺析es6-promise源碼

摘要：主要邏輯本質上還是回調函數那一套。通過的判斷完成異步和同步的區分。主要邏輯: 本質上還是回調函數那一套。通過_subscribers的判斷完成異步和同步的區分。通過 resolve，reject -> publish -> invokeCallback -> resolve，reject的遞歸和下一條then的parent是上一條的child來完成then鏈的流轉同步情況...

fox_soyoung 2019-08-23 16:16 評論0 收藏0
ES6-Promise

摘要：方法沒有設置返回值。解決思路是，當遇到任務的返回值是一個或者，并且有自己的方法的時候，就將它當做是一個對象處理，等這個對象中的方法處理到的時候，把作為參數輸出傳遞給后續的任務。前段時間看到關于microTask的文章，《Tasks, microTasks, queues and schedules》，感覺有必要澄清一下。本篇里用setTimeout來實現的Promise，和瀏覽器原生...

dackel 2019-08-21 14:17 評論0 收藏0
前端臨床手扎——簡單易用的fetch

摘要：如題，新增的真的簡單易用，感覺現在這一個支持完全可行。雖然兼容性問題還是存在，但是打上后就基本解決了。來自使用簡單使用這里說明一下，必須配合一起使用，這會得到更佳效果。如題，es6 新增的fetch真的簡單易用，感覺現在這一個支持完全可行。 showImg(https://segmentfault.com/img/bVGlRy?w=995&h=631); 雖然兼容性問題還是存在，但是...

xingqiba 2019-08-22 10:46 評論0 收藏0
在微信小程序使用音樂api的方法，以及微信小程序播放背景音樂失敗的解決方案匯總

摘要：下一步準備使用網易云代替音樂。已經開發新的網易云代替音樂了，需要的可以看看這篇文章為微信小程序開發的網易云音樂庫項目要做一個可以為日記添加音樂的小程序，所以要用到音樂api，參考了一些文章后我們封裝了一個qq音樂api庫（完成了動態token獲取，音樂搜索，音樂專輯圖片，音樂名稱，歌手名稱，播放），有需要的可以到Github自提。小程序qq音樂api庫Gihub地址https://...

Sleepy 2019-08-23 17:16 評論0 收藏0
turnjs fabricjs canvas 翻書

摘要：最近做了一個翻書效果的項目來總結一下實現過程和遇到的一些問題供自己以后快速解決問題希望也能幫到同樣遇到此類問題的同學如果有更好的方法希望你能分享給我地址插件問題都是些自己覺的比較難解決的比較片面如有其他疑問可以留言交流或者當你從官網下載最近做了一個翻書效果的項目, 來總結一下實現過程和遇到的一些問題, 供自己以后快速解決問題, 希望也能幫到同樣遇到此類問題的同學, 如果有更好的方法,...

mylxsw 2019-08-20 13:49 評論0 收藏0