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

資訊專欄INFORMATION COLUMN

co.js - 讓異步代碼同步化

lanffy / 2386人閱讀

摘要：前端開發(fā)群是大神所編寫的異步解決方案的庫(kù)，用于讓異步的代碼同步化。對(duì)于異步代碼來說，回調(diào)函數(shù)是最基礎(chǔ)的方案，帶來的弊端也顯而易見。讓代碼扁平化，而讓代碼同步化。

近期在全力開發(fā)個(gè)人網(wǎng)站，并且又沉淀了一些前后端的技術(shù)。近期會(huì)頻繁更新。

這篇文章首發(fā)于我的個(gè)人網(wǎng)站：聽說 - https://tasaid.com，建議在我的個(gè)人網(wǎng)站閱讀，擁有更好的閱讀體驗(yàn)。

這篇文章與 博客園 和 Segmentfault 共享。

前端開發(fā)QQ群：377786580

co 是 TJ 大神所編寫的 JavaScript 異步解決方案的庫(kù)，用于讓異步的代碼 "同步化"。

它構(gòu)建在以下兩個(gè)基礎(chǔ)上，這篇文章不會(huì)詳細(xì)講解這 2 個(gè)知識(shí)點(diǎn)：

ES6 - generator

ES6 - Promise

Generator 和 co

首先我們簡(jiǎn)單了解下 generator：

// 定義一個(gè) generators
function* foo(){
    yield console.log("bar");
    yield console.log("baz");
}

var g = foo();
g.next(); // prints "bar"
g.next(); // prints "baz"

簡(jiǎn)單來說，generator 實(shí)現(xiàn)了狀態(tài)暫停/函數(shù)暫停 —— 通過 yield 關(guān)鍵字暫停函數(shù)，并返回當(dāng)前函數(shù)的狀態(tài)。

co 實(shí)現(xiàn)了 generator 的 自動(dòng)執(zhí)行，我們使用 co 和 Promise 修改上面的代碼：

var co = require("co");

function* foo() {
    yield Promise.resolve(console.log("bar"));
    yield Promise.resolve(console.log("baz"));
}

var co = require("co");
co(foo);

有人可能要說 "我自己寫個(gè)循環(huán)執(zhí)行 next 不也可以么？ 為什么一個(gè)循環(huán)還要依賴一個(gè)庫(kù)？"

co 有個(gè)使用條件：generator 函數(shù)的 yield 命令后面，只能是 Thunk 函數(shù)或 Promise 對(duì)象。

正是這個(gè)條件，讓 co 強(qiáng)悍無比。

Callback

我們一步一步來看異步，首先使用 回調(diào)函數(shù)/Callback 的方式封裝一個(gè)常見的 ajax 異步任務(wù)：

function ajax(q, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    xhr.open("GET", "query?q=" + q);
}

我們使用 回調(diào)函數(shù) 的方式連續(xù)發(fā) 2 條請(qǐng)求：

ajax("foo", function (foo) {
    console.log(foo);
    ajax("bar", function (bar) {
        console.log(bar);
    });
});

這是 js 中最典型的異步處理方案。

Promise

再使用 Promise 封裝異步 ajax，讓回調(diào)函數(shù)扁平化：

function ajax(q, callback) {
    // 使用 Promise 封裝
    return new Promise(function (resolve) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(xhr.responseText);
            }
        }
        xhr.open("GET", "query?q=" + q);
    });
}

然后修改請(qǐng)求代碼，扁平化異步代碼：

ajax("foo")
    .then(function (foo) {
        console.log(foo);
        return ajax("bar")
    })
    .then(function (bar) {
        console.log(bar);
    });
co

最后，讓我們見一下 co 的強(qiáng)悍之處吧。我們使用 co.js 來修改請(qǐng)求代碼：

var co = require("co");

co(function* () {
    var foo = yield ajax("foo");
    console.log(foo);

    var bar = yield ajax("bar");
    console.log(bar);
});

最終我們的異步任務(wù)，在代碼中同步化了。

對(duì)于異步代碼來說，回調(diào)函數(shù)是最基礎(chǔ)的方案，帶來的弊端也顯而易見。Promise 讓代碼扁平化，而 co 讓代碼同步化。

這篇文章首發(fā)于我的個(gè)人網(wǎng)站：聽說 - https://tasaid.com，建議在我的個(gè)人網(wǎng)站閱讀，擁有更好的閱讀體驗(yàn)。

這篇文章與 博客園 和 Segmentfault 共享。

前端開發(fā)QQ群：377786580
參考和引用

Promise.js

Github - TJ Holowaychuk - co.js

co 函數(shù)庫(kù)的含義和用法

Thunk 函數(shù)的含義和用法

MDN - 迭代器和生成器

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

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

相關(guān)文章

  • ES6 Generator與異步的同步書寫

    摘要：返回值是一個(gè)對(duì)象，它的第一個(gè)屬性是后面表達(dá)式的值或者的值第二個(gè)屬性表示函數(shù)是否執(zhí)行完成。真正的業(yè)務(wù)邏輯確實(shí)是用同步的方式寫的。 開始前 我們從來沒有停止過對(duì)javascript語言異步調(diào)用方式的改造，我們一直都想用像java那樣同步的方式去寫異步，盡管Promise可以讓我們將異步回調(diào)添加到then方法中，但是這種調(diào)用方式仍然不那么優(yōu)雅，es6 中新增加了generator，我們可以通...

    andycall 評(píng)論0 收藏0

  • co源碼分析及其實(shí)踐

    摘要：返回的結(jié)果是一個(gè)對(duì)象，類似于表示本次后面執(zhí)行之后返回的結(jié)果。對(duì)象用于一個(gè)異步操作的最終完成或失敗及其結(jié)果值的表示簡(jiǎn)單點(diǎn)說就是處理異步請(qǐng)求。源碼分析主要脈絡(luò)函數(shù)調(diào)用后，返回一個(gè)實(shí)例。參考鏈接解釋對(duì)象的用法的源碼及其用法 本文始發(fā)于我的個(gè)人博客，如需轉(zhuǎn)載請(qǐng)注明出處。為了更好的閱讀體驗(yàn)，可以直接進(jìn)去我的個(gè)人博客看。 前言 知識(shí)儲(chǔ)備 閱讀本文需要對(duì)Generator和Promise有一個(gè)基本的...

    vincent_xyb 評(píng)論0 收藏0

  • 對(duì)Koa-middleware實(shí)現(xiàn)機(jī)制的分析

    摘要：現(xiàn)在我們從實(shí)現(xiàn)一個(gè)簡(jiǎn)易的方法開始探索其中的機(jī)制。其中內(nèi)部的可以將上一個(gè)的返回值傳遞給外部。一言以蔽之實(shí)現(xiàn)了遞歸調(diào)用的方法。當(dāng)執(zhí)行到的中間件沒有時(shí)并且返回的為時(shí)逆序執(zhí)行。 本文發(fā)布在github.com/ssssyoki,歡迎star,issues共同交流。 Koa是基于Node.js的下一代web開發(fā)框架，相比Express更輕，源碼只有幾百行。與傳統(tǒng)的中間件不同，在Koa 1.x中采...

    MageekChiu 評(píng)論0 收藏0

  • 深入探析koa之異步回調(diào)處理篇

    摘要：而之后，我們得到的是一個(gè)是一個(gè)對(duì)象，我們可以使用語句定義回調(diào)函數(shù)，函數(shù)的內(nèi)容呢，則是將讀取到的返回給并繼續(xù)讓從斷點(diǎn)處執(zhí)行。 在上一篇中我們梳理了koa當(dāng)中中間件的洋蔥模型執(zhí)行原理，并實(shí)現(xiàn)了一個(gè)可以讓洋蔥模型自動(dòng)跑起來的流程管理函數(shù)。這一篇，我們?cè)賮硌芯恳幌耴oa當(dāng)中異步回調(diào)同步化寫法的原理，同樣的，我們也會(huì)實(shí)現(xiàn)一個(gè)管理函數(shù)，是的我們能夠通過同步化的寫法來寫異步回調(diào)函數(shù)。 1. 回調(diào)金字...

    Drinkey 評(píng)論0 收藏0

  • dubbo源碼解析（四十八）異步化改造

    摘要：大揭秘異步化改造目標(biāo)從源碼的角度分析的新特性中對(duì)于異步化的改造原理?？丛创a解析四十六消費(fèi)端發(fā)送請(qǐng)求過程講到的十四的，在以前的邏輯會(huì)直接在方法中根據(jù)配置區(qū)分同步異步單向調(diào)用。改為關(guān)于可以參考源碼解析十遠(yuǎn)程通信層的六。 2.7大揭秘——異步化改造 目標(biāo)：從源碼的角度分析2.7的新特性中對(duì)于異步化的改造原理。 前言 dubbo中提供了很多類型的協(xié)議，關(guān)于協(xié)議的系列可以查看下面的文章： du...

    lijinke666 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<