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

lanffy 發布于2019-08-20 11:25 / 2369人閱讀

摘要：前端開發群是大神所編寫的異步解決方案的庫，用于讓異步的代碼同步化。對于異步代碼來說，回調函數是最基礎的方案，帶來的弊端也顯而易見。讓代碼扁平化，而讓代碼同步化。

近期在全力開發個人網站，并且又沉淀了一些前后端的技術。近期會頻繁更新。

這篇文章首發于我的個人網站：聽說 - https://tasaid.com，建議在我的個人網站閱讀，擁有更好的閱讀體驗。

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

前端開發QQ群：377786580

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

它構建在以下兩個基礎上，這篇文章不會詳細講解這 2 個知識點：

ES6 - generator

ES6 - Promise

Generator 和 co

首先我們簡單了解下 generator：

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

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

簡單來說，generator 實現了狀態暫停/函數暫停 —— 通過 yield 關鍵字暫停函數，并返回當前函數的狀態。

co 實現了 generator 的 自動執行，我們使用 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);

有人可能要說 "我自己寫個循環執行 next 不也可以么？為什么一個循環還要依賴一個庫？"

co 有個使用條件：generator 函數的 yield 命令后面，只能是 Thunk 函數或 Promise 對象。

正是這個條件，讓 co 強悍無比。

Callback

我們一步一步來看異步，首先使用 回調函數/Callback 的方式封裝一個常見的 ajax 異步任務：

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);
}

我們使用 回調函數 的方式連續發 2 條請求：

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

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

Promise

再使用 Promise 封裝異步 ajax，讓回調函數扁平化：

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);
    });
}

然后修改請求代碼，扁平化異步代碼：

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

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

var co = require("co");

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

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

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

對于異步代碼來說，回調函數是最基礎的方案，帶來的弊端也顯而易見。Promise 讓代碼扁平化，而 co 讓代碼同步化。

這篇文章首發于我的個人網站：聽說 - https://tasaid.com，建議在我的個人網站閱讀，擁有更好的閱讀體驗。

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

前端開發QQ群：377786580

參考和引用

Promise.js

Github - TJ Holowaychuk - co.js

co 函數庫的含義和用法

Thunk 函數的含義和用法

MDN - 迭代器和生成器

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

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

ES6 Generator與異步的同步書寫

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

andycall 2019-08-20 17:51 評論0 收藏0
co源碼分析及其實踐

摘要：返回的結果是一個對象，類似于表示本次后面執行之后返回的結果。對象用于一個異步操作的最終完成或失敗及其結果值的表示簡單點說就是處理異步請求。源碼分析主要脈絡函數調用后，返回一個實例。參考鏈接解釋對象的用法的源碼及其用法本文始發于我的個人博客，如需轉載請注明出處。為了更好的閱讀體驗，可以直接進去我的個人博客看。前言知識儲備閱讀本文需要對Generator和Promise有一個基本的...

vincent_xyb 2019-08-22 11:14 評論0 收藏0
對Koa-middleware實現機制的分析

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

MageekChiu 2019-08-22 10:50 評論0 收藏0
深入探析koa之異步回調處理篇

摘要：而之后，我們得到的是一個是一個對象，我們可以使用語句定義回調函數，函數的內容呢，則是將讀取到的返回給并繼續讓從斷點處執行。在上一篇中我們梳理了koa當中中間件的洋蔥模型執行原理，并實現了一個可以讓洋蔥模型自動跑起來的流程管理函數。這一篇，我們再來研究一下koa當中異步回調同步化寫法的原理，同樣的，我們也會實現一個管理函數，是的我們能夠通過同步化的寫法來寫異步回調函數。 1. 回調金字...

Drinkey 2019-08-20 12:24 評論0 收藏0
dubbo源碼解析（四十八）異步化改造

摘要：大揭秘異步化改造目標從源碼的角度分析的新特性中對于異步化的改造原理。看源碼解析四十六消費端發送請求過程講到的十四的，在以前的邏輯會直接在方法中根據配置區分同步異步單向調用。改為關于可以參考源碼解析十遠程通信層的六。 2.7大揭秘——異步化改造目標：從源碼的角度分析2.7的新特性中對于異步化的改造原理。前言 dubbo中提供了很多類型的協議，關于協議的系列可以查看下面的文章： du...

lijinke666 2019-08-19 10:18 評論0 收藏0