JavaScript ES6 Promiss對象

来源:https://www.cnblogs.com/kexing/archive/2019/07/25/11246670.html
-Advertisement-
Play Games

說明 Node.js中,以非同步(Async)回調著稱,使用了非同步,提高了程式的執行效率,但是,代碼可讀性較差的。 假如有幾個非同步操作,後一個操作需要前一個操作的執行完畢之後返回的數據才能執行下去,如果使用Node.js,就需要一層層嵌套下去,Promised對象就是針對此問題所提出來的的解決辦法。 ...


說明

Node.js中,以非同步(Async)回調著稱,使用了非同步,提高了程式的執行效率,但是,代碼可讀性較差的。
假如有幾個非同步操作,後一個操作需要前一個操作的執行完畢之後返回的數據才能執行下去,如果使用Node.js,就需要一層層嵌套下去,Promised對象就是針對此問題所提出來的的解決辦法。

基本概念

Promise對象狀態:

  1. pending
    初始狀態,也稱為未定狀態,就是初始化Promise時,調用executor執行器函數後的狀態。
  2. fulfilled
    完成狀態,意味著非同步操作成功。
  3. rejected
    失敗狀態,意味著非同步操作失敗。

狀態轉換隻有這兩種pending->fulfilled pending->,可返回的這個Promise對象的狀態主要是根據promise1.then()方法返回的值:

狀態轉化是單向的,不可逆轉,已經確定的狀態(fulfilled/rejected)無法轉回初始狀態(pending)

當狀態為rejected,該promise無法繼續往下執行,需要添加一個catch獲得異常信息
回調函數:

  • resolve
    pending狀態轉為fulfilled狀態時候回調(操作成功)
  • reject
    pending狀態轉為rejected狀態時候回調(操作失敗)

方法:

  • then()
  • catch()
  • all()
  • race()

基本使用

new Promise(function(resolve,reject){
    //這裡面實現非同步操作,ajax等..
    //獲得結果,回調傳參
    if(/*success*/){
        resolve();
    }else{
        reject();
    }
});
//雖然沒有去執行setTimeOut函數,但是Promise會自動執行,所以,一般需要將Promise寫在一個function裡面
new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5,當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject("錯誤,num>=0.5");
        }
        console.log('執行完成');
    },2000);
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5,當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //這裡的data是之前resolve中的回調參數
    console.log(data);
},function(error){
    //這裡的error是之前resolve中的回調參數
    console.log("錯誤原因為"+error);
});

進階使用

then()

Promise then(fun(resolve,reject))

p.then(function(data){
    //這裡的data是之前resolve中的回調參數
    console.log(data);
},function(data){
    //這裡的data是之前resolve中的回調參數
    console.log("錯誤");
    console.log(data);
});

then方法,可以接收回調的參數併進行處理,then方法返回的是一個Promise對象。這裡,我們主要關心的是返回的Promise對象的狀態。

可返回的這個Promise對象的狀態主要是根據promise1.then()方法返回的值:

  1. 如果then()方法中返回了一個參數值,那麼返回的Promise將會變成接收狀態。
  2. 如果then()方法中拋出了一個異常,那麼返回的Promise將會變成拒絕狀態。
  3. 如果then()方法調用resolve()方法,那麼返回的Promise將會變成接收狀態。
  4. 如果then()方法調用reject()方法,那麼返回的Promise將會變成拒絕狀態。
  5. 如果then()方法返回了一個未知狀態(pending)的Promise新實例,那麼返回的新Promise就是未知狀態。
  6. 如果then()方法沒有明確指定的resolve(data)/reject(data)/return data時,那麼返回的新Promise就是接收狀態,可以一層一層地往下傳遞。
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5,當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的數據執行相關的非同步操作
},function(error){
    //出現錯誤,處理錯誤信息
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    console.log(data);
}).then(function(){
    setTimeout(function(){
        console.log("過了5s,繼續執行");
    },5000);
});

catch()

catch()方法和then()方法一樣,都會返回一個新的Promise對象,它主要用於捕獲非同步操作時出現的異常。

因此,我們通常省略then()方法的第二個參數,把錯誤處理控制權轉交給其後面的catch()函數。

下麵的兩段代碼塊,實現的功能是一樣的。

let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //當隨機數小於0.5,當前promise完成了執行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的數據執行相關的非同步操作
},function(error){
    //出現錯誤,處理錯誤信息
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('執行完成');
    },2000);
});
p.then(function(data){
    //用上次獲得的數據執行相關的非同步操作
}).catch(function(error){
    //處理錯誤信息
});

race()

傳入參數為可迭代的對象,如數組

兩個非同步任務同時向同一個url發送請求,誰先得到數據,另外的那個非同步任務獲得的數據就會被丟棄

//2s後輸出“執行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成1');
    },2000);
});
//1s後輸出“執行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('執行完成2');
    },1000);
});
//兩個非同步任務同時開始
let mixedPromisesArray = [p,p1];
let p3 = Promise.race(mixedPromisesArray).then(data=>{
    //這裡的data為hello 2,hello被丟棄
    console.log(data);
});

all()

參數也是可迭代的對象,如數組

一般用於幾個任務同時並行運行的情況

當某個任務失敗,狀態就會變為reject

//2s後輸出“執行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('執行完成1');
    },2000);
});
//1s後輸出“執行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('執行完成2');
    },1000);
});
//兩個非同步任務同時開始
let mixedPromisesArray = [p,p1];
let p3 = Promise.all(mixedPromisesArray).then(data=>{
    //這裡的data數組,存放著之前兩個非同步回調傳的數據
    console.log(data);
});

參考

ES6關於Promise的用法
MDN Promise


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於mapreduce的一些註意細節 如果把mapreduce程式打包放到了liux下去運行, 命令java –cp xxx.jar 主類名 如果報錯了,說明是缺少相關的依賴jar包 用命令hadoop jar xxx.jar 類名因為在集群機器上用 hadoop jar xx.jar mr.wc. ...
  • MySql 嚴格模式 [TOC] MySQL的sql_mode合理設置 sql model 常用來解決下麵幾類問題 sql_mode常用值 ONLY_FULL_GROUP_BY NO_AUTO_VALUE_ON_ZERO STRICT_TRANS_TABLES NO_ZERO_IN_DATE NO_ ...
  • 文本組件(text)負責顯示文本和定義顯示樣式,下表為text常見屬性 ...
  • 版權聲明:本文為xing_star原創文章,轉載請註明出處! 本文同步自http://javaexception.com/archives/174 ViewPager作為RecyclerView的itemView出現的刷新不顯示的問題 Google搜索關鍵詞 recyclerview viewpag ...
  • 內容轉載自 "我的博客" 如果你只想找到如何用代碼解析各數據請點擊目錄"使用Java解析數據" @ "TOC" 1. 獲取原始藍牙廣播包 首先需要開啟 開發者選項 :不同Android手機打開此功能的方法基本一致,首先打開設置,然後找到系統版本號(例如MIUI系統的全部參數選項的MIUI版本),快速 ...
  • 1.智能快遞櫃(開篇) 2.智能快遞櫃(終端篇) 3.智能快遞櫃(通信篇-HTTP) 4.智能快遞櫃(通信篇-SOCKET) 5.智能快遞櫃(通信篇-Server程式) 6.智能快遞櫃(平臺篇) 7.智能快遞櫃(APP及微信公眾號) 8.智能快遞櫃SDK(聯網型鎖板) 9.智能快遞櫃SDK(串口型鎖 ...
  • 先來看一張效果圖(LICEcap錄製的有點卡, 湊合看) 理一下大概流程: 接下來實現: 彈幕視圖從底部彈上來, 依次動畫向上滾動, 出屏幕就移除加入重用隊列, 下次使用. 定義相關屬性: 1. 根據彈幕區域, 確定總共需要的彈幕itemView個數(總區域高度/最小高度),並添加到彈幕控制項底部 從 ...
  • 前言:做一名Web設計師是一件令人興奮的事。在Web技術中,JavaScript是一個經歷從被人誤解到萬眾矚目的巨大轉變,在歷史的衝擊中被留存下來的個體。因為JavaScript的引導,Web開發也從混亂無序的狀態轉變為需要經過嚴格訓練才能勝任的工作。當大家談論起Web開發時,自然會提到Web標準中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...