成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JS異步編程之Promise

Hegel_Gu / 669人閱讀

摘要：三是控制反轉(zhuǎn)控制權(quán)在其他人的代碼上，假如異步函數(shù)是別人提供的庫，我們把回調(diào)函數(shù)傳進去，我們并不能知道異步函數(shù)在調(diào)用回調(diào)函數(shù)之外做了什么事情。錯誤捕捉相比回調(diào)函數(shù)的錯誤無法在外部捕捉的問題，能夠為一連串的異步調(diào)用提供錯誤處理。

前言

《JS異步編程之 callback》一文我們了解了“JS 是基于單線程事件循環(huán)”的概念構(gòu)建的，回調(diào)函數(shù)不會立即執(zhí)行，由事件輪詢?nèi)z測事件是否執(zhí)行完畢，當(dāng)執(zhí)行完有結(jié)果后，將結(jié)果放入回調(diào)函數(shù)的參數(shù)中，然后將回調(diào)函數(shù)添加到事件隊列中等待被執(zhí)行。

同時也講了回調(diào)函數(shù)的問題：

一是“回調(diào)地獄”，因為異步回調(diào)函數(shù)的特點：回調(diào)函數(shù)是作為異步函數(shù)的參數(shù)，一層一層嵌套，當(dāng)嵌套過多，將使代碼邏輯變得混亂，也無法做好錯誤捕捉和處理（只能在回調(diào)函數(shù)內(nèi)部 try catch）。

二是回調(diào)的執(zhí)行方式不符合自然語言的線性思維方式，不容易被理解。

三是控制反轉(zhuǎn)（控制權(quán)在其他人的代碼上），假如異步函數(shù)是別人提供的庫，我們把回調(diào)函數(shù)傳進去，我們并不能知道異步函數(shù)在調(diào)用回調(diào)函數(shù)之外做了什么事情。

func1(() => {
    func2(() => {
        func3(() => {
            func4(() => {
                try {
                    ...
                } catch (err){
                    ...
                }
            })
        });
    });
});
一、Promise 原理

首先，Promise 中文翻譯為“承諾”， 是 JavaScript 的一種對象，表示承諾終將返回一個結(jié)果，無論成功還是失敗。

Promise 有三個狀態(tài)：等待中（pending），完成（fullfilled），失?。╮ejected）, Promise 的設(shè)計具有原子性，狀態(tài)一旦從 pending 狀態(tài)轉(zhuǎn)換為 fullfilled 狀態(tài)或者 rejected 狀態(tài)后，將不能被改變。

var promise1 = new Promise((resolve, reject) => {
    console.log("Promise 構(gòu)造器會立即執(zhí)行");
    setTimeout(function (){
        if(true) {
            resolve("完成");
        } else {
            reject("失敗");
        }
    }, 1000);
})
promise1
.then((result) => {
    // do something
    console.log(result);
    return 1
    
    // return Promise.resolve(1);  // 返回一個決議為成功的 promise 實例
    // return Promise.reject("error");  // 返回一個決議為拒絕的 Promise 實例
})
.then((result) => {
    // .then() 方法會返回一個 promise, 完成調(diào)用的參數(shù)為前一個 promise 的返回值或者決議值。
    // do other things
    console.log(result);
    throw new Error("錯誤")  // 拋出錯誤是隱式拒絕
})
.catch((error) => {
    // 捕捉錯誤
    console.log(error)
})
.then(() => {
    // 還能繼續(xù)執(zhí)行！
})
.finally(() => {
    // always do somethings
    console.log("finally!")
})
二、Promise 的優(yōu)勢

鏈?zhǔn)秸{(diào)用

Promise 使用 then 方法后還會返回一個新的 Promise 對象，便于我們傳遞狀態(tài)數(shù)據(jù)，同時鏈?zhǔn)綄懛ń咏谕綄懛?，更符合線性思維。

錯誤捕捉

相比回調(diào)函數(shù)的錯誤無法在外部捕捉的問題，Promise 能夠為一連串的異步調(diào)用提供錯誤處理。

控制反轉(zhuǎn)再反轉(zhuǎn)

由于第三方提供的異步函數(shù)，無法保證回調(diào)函數(shù)如何被執(zhí)行，但是 Promise 的特點，能夠保證異步函數(shù)只能被 resolve 一次，以及始終以異步的形式執(zhí)行代碼。

可以利用 Promise.all 和 Promise.race 來解決 Promise 始終未決議和并行 Promise 嵌套的問題

三、Promise 的不足

每個 .then() 都是一個獨立的作用域

加入有很多個 .then() 方法，就會創(chuàng)建很多個獨立的作用域，那么將只能通過外面包裹一層函數(shù)作用域的閉包來共享狀態(tài)數(shù)據(jù)

無法取消單個 .then()

當(dāng) Promise 鏈中任意一個 .then() 方法中有語句執(zhí)行錯誤后，盡管經(jīng)過 catch 方法的錯誤處理，還是并不會中斷整個 Promise 鏈的執(zhí)行。

無法得知進度

由于 Promise 只能從 pending 到 fullfilled 或 rejected 狀態(tài)，無法得知 pending 階段的進度。

四、Promise 應(yīng)用 
// Promise 封裝 ajax
function fetch(method, url, data){
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        var method = method || "GET";
        var data = data || null;
        xhr.open(method, url, true);
        xhr.onreadystatechange = function() {
            if(xhr.status === 200 && xhr.readyState === 4){
                resolve(xhr.responseText);
            } else {
                reject(xhr.responseText);
            }
        }
        xhr.send(data);
        })
}

// 使用
fetch("GET", "/some/url.json", null)
.then(result => {
    console.log(result);
})

// 封裝 nodejs error first 風(fēng)格回調(diào)
function readFile(url) {
    return new Promise((resolve, reject) => {
       fs.readFile(url,"utf8", (err, data) => {
        if(err) {
            reject(err);
            return;
        }
        resolve(data)
        }) 
    })
}
五、總結(jié)

Promise 是 ES6 提出的簡化異步流程控制的新規(guī)范，強調(diào)異步任務(wù)的完成狀態(tài)且具有原子性，這使得我們的代碼更容易追蹤和維護。Promise 在事件輪詢中屬于異步事件隊列中的微任務(wù)，而微任務(wù)總是一次性全部執(zhí)行，而宏任務(wù)是每輪輪詢執(zhí)行一個，此節(jié)內(nèi)容參考我之前的文章《JS專題之事件循環(huán)》。

2019/02/24 @Manncoffee

歡迎關(guān)注我的個人公眾號“謝南波”，專注分享原創(chuàng)文章。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102060.html

相關(guān)文章

  • JS筆記

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。異步編程入門的全稱是前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。 TypeScript 入門教程 從 JavaScript 程序員的角度總結(jié)思考，循序漸進的理解 TypeScript。 網(wǎng)絡(luò)基礎(chǔ)知識之 HTTP 協(xié)議 詳細(xì)介紹 HTT...

    rottengeek 評論0 收藏0

  • 探索Javascript 異步編程

    摘要：因為瀏覽器環(huán)境里是單線程的，所以異步編程在前端領(lǐng)域尤為重要。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯誤處理機制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我們?nèi)粘＞幋a中，需要異步的場景很多，比如讀取文件內(nèi)容、獲取遠程數(shù)據(jù)、發(fā)送數(shù)據(jù)到服務(wù)端等。因為瀏覽器環(huán)境里Javascript是單線程的，...

    Salamander 評論0 收藏0

  • JavaScript異步編程解決方案筆記

    摘要：異步編程解決方案筆記最近讀了樸靈老師的深入淺出中異步編程一章，并參考了一些有趣的文章。另外回調(diào)函數(shù)中的也失去了意義，這會使我們的程序必須依賴于副作用。 JavaScript 異步編程解決方案筆記 最近讀了樸靈老師的《深入淺出NodeJS》中《異步編程》一章，并參考了一些有趣的文章。在此做個筆記，記錄并鞏固學(xué)到的知識。 JavaScript異步編程的兩個核心難點 異步I/O、事件驅(qū)動使得...

    dmlllll 評論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關(guān)于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0

  • JavaScript 工作原理之四－事件循環(huán)及異步編程的出現(xiàn)和 5 種更好的 async/await

    摘要：函數(shù)會在之后的某個時刻觸發(fā)事件定時器。事件循環(huán)中的這樣一次遍歷被稱為一個。執(zhí)行完畢并出棧。當(dāng)定時器過期，宿主環(huán)境會把回調(diào)函數(shù)添加至事件循環(huán)隊列中，然后，在未來的某個取出并執(zhí)行該事件。 原文請查閱這里，略有改動。 本系列持續(xù)更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第四章。 現(xiàn)在，我們將會通過回顧單線程環(huán)境下編程的弊端及如何克服這些困難以創(chuàng)建令人驚嘆...

    maochunguang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<