JS異步編程之Promise

Hegel_Gu 發(fā)布于2019-08-23 15:26 / 620人閱讀

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

前言

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

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

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

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

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

func1(() => {
    func2(() => {
        func3(() => {
            func4(() => {
                try {
                    ...
                } catch (err){
                    ...
                }
            })
        });
    });
});

一、Promise 原理

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

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

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

二、Promise 的優(yōu)勢(shì)

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

Promise 使用 then 方法后還會(huì)返回一個(gè)新的 Promise 對(duì)象，便于我們傳遞狀態(tài)數(shù)據(jù)，同時(shí)鏈?zhǔn)綄?xiě)法接近于同步寫(xiě)法，更符合線性思維。

錯(cuò)誤捕捉

相比回調(diào)函數(shù)的錯(cuò)誤無(wú)法在外部捕捉的問(wèn)題，Promise 能夠?yàn)橐贿B串的異步調(diào)用提供錯(cuò)誤處理。

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

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

可以利用 Promise.all 和 Promise.race 來(lái)解決 Promise 始終未決議和并行 Promise 嵌套的問(wèn)題

三、Promise 的不足

每個(gè) .then() 都是一個(gè)獨(dú)立的作用域

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

無(wú)法取消單個(gè) .then()

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

無(wú)法得知進(jìn)度

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

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

2019/02/24 @Manncoffee

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

GPU云服務(wù)器云服務(wù)器 jquery_promise異步 js異步編程異步編程易語(yǔ)言編程之

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102060.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Hegel_Gu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

anaconda下載tensorflow

閱讀 2666·2023-04-25 15:22
國(guó)慶假期學(xué)門(mén)新技術(shù)，拒絕只做crud boy, 就從操作系統(tǒng)開(kāi)始（三）

閱讀 2837·2021-10-11 10:58
PhotonVPS：$4/月KVM-2GB/30GB/2TB/洛杉磯&達(dá)拉斯&

閱讀 1057·2021-08-30 09:48
山地人的2019年前端自學(xué)路徑Roadmap——v0.0.1

閱讀 1864·2019-08-30 15:56
?Web開(kāi)發(fā)者需要知道的CSS Tricks

閱讀 1740·2019-08-30 15:53
如何讓 H5 體驗(yàn)接近 APP：（一）觸摸反饋

閱讀 1105·2019-08-29 11:16
js排序算法

閱讀 1058·2019-08-23 18:34
爬蟲(chóng)爬 JSON HTML 數(shù)據(jù)

閱讀 1649·2019-08-23 18:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS異步編程之Promise

相關(guān)文章

JS筆記

探索Javascript 異步編程

JavaScript異步編程解決方案筆記

ES6-7

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

發(fā)表評(píng)論

0條評(píng)論

Hegel_Gu

男|高級(jí)講師

TA的文章

anaconda下載tensorflow

國(guó)慶假期學(xué)門(mén)新技術(shù)，拒絕只做crud boy, 就從操作系統(tǒng)開(kāi)始（三）

PhotonVPS：$4/月KVM-2GB/30GB/2TB/洛杉磯&達(dá)拉斯&

山地人的2019年前端自學(xué)路徑Roadmap——v0.0.1

?Web開(kāi)發(fā)者需要知道的CSS Tricks

如何讓 H5 體驗(yàn)接近 APP：（一）觸摸反饋

js排序算法

爬蟲(chóng)爬 JSON HTML 數(shù)據(jù)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS異步編程之Promise

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！