非同步的發展過程

chenhongdong發表於2018-03-28
非同步

發展過程

  • callback -> promise -> genrator + co -> async + await(語法糖)

非同步是不支援try/catch的，try/catch只在同步中使用

node支援非同步

// 1.txt -> 周杰倫
// 2.txt -> 七里香
// node裡內建的fs方法
const fs = require('fs');

fs.readFile('1.txt', 'utf8', function (err, data) {
    fs.readFile(data, 'utf8', function (err, data) {
        console.log(data);
    });
});
複製程式碼

高階函式

  • 定義： 函式可以作為引數or函式可以作為返回值，來實現個判斷資料型別的isType函式
function isType(type, value) {
  return Object.prototype.toString.call(value) === `[object ${type}]`;
}
console.log(isType('String', 'hello'));  // true
console.log(isType('Array', ['hi', 1, 2]));  // true
console.log(isType('Function', function (){});  // true
複製程式碼

上面的isType函式雖然可以實現資料型別的判斷，但是每次都要傳遞多餘的引數

這樣寫起來很麻煩，其實下面還有更好的方法來減少引數

改良後的isType如下：

// 批量生產函式
function isType(type) {  // 偏函式  先預置進去
    return function(value) {
        return Object.prototype.toString.call(value) === `[object ${type}]`;
    }
}

const isArray = isType('Array');    // 判斷陣列
const isString = isType('String');  // 判斷字串
console.log(isArray([222]));         // true
複製程式碼

像批量生產函式的這種實現，還有一種就是預置函式，預置函式的實現原理很簡單，當達到條件時再執行回撥函式，像lodash裡的after方法一樣

function after(time, cb) {
    return function() {
        if (--time === 0) {
            cb();
        }
    }
}
// 舉個栗子吧，吃飯的時候，我很能吃，吃了三碗才能吃飽
let eat = after(3, function() {
    console.log('吃飽了');
});
eat();
eat();
eat();
// 只有執行三次吃的函式才會觸發‘吃飽了’
複製程式碼

前面說了好多別的，有點跑題了，繼續回來說非同步的事

我現在還是有兩個檔案，我要用fs去讀取，然後非同步的問題就來了，我怎麼知道哪個先讀完，哪個後讀完。

好吧，其實我也不關心，我關心的是我要怎麼拿到這兩個檔案裡的資料

說下我的思路吧：

一開始想直接放個陣列來存取每次讀到的資料，但這個放在同步情況下沒問題 非同步就不行了

我畢竟不知道哪個先讀取完，這個過程是無法判斷的

於是乎想到了個最簡單的方法，得利用函式了，把資料當做引數傳過去

// 寫一個輸出資料的函式
let arr = [];
function out(data) {
    arr.push(data);
    if (arr.length === 2) {
        console.log(arr);    // ['周杰倫', '七里香']
    }
}

fs.readFile('1.txt', 'utf8', function(err, data)  {
    out(data);
});
fs.readFile('2.txt', 'utf8', function(err, data)  {
    out(data);
});
複製程式碼

以上程式碼確實實現了把讀取的資料都拿到了

But還是有些小缺陷，out裡面的數字2是寫死的

如果又多了一個檔案讀取，那就得改成3了，這很不夠酷

那麼，怎樣改比較好呢，還記得上面實現的after函式吧

現在來看看它的用處吧

// 用after函式去改造一下out函式
let out = after(2, function(arr) {
    console.log(arr);
});

function after(time, cb) {
    // result被引用了，形成了閉包，不會被回收掉
    let result = [];
    return function(data) {
        result.push(data);
        if (--time === 0) {
            cb(result);      // 可以快取函式，當到達條件時執行
        }
    }
}

fs.readFile('1.txt', 'utf8', function(err, data)  { out(data); });
fs.readFile('2.txt', 'utf8', function(err, data)  { out(data); });
複製程式碼

雖然after方法已經很好了，但是我們不能每次處理非同步請求的時候，都手寫一遍after函式，這不科學，不合理

SO因此我們用上了promise

promise

從實際開發中，promise解決了回撥地獄的問題，不會導致難以維護

then可以按照順序執行

羅裡吧嗦了一堆，終於進入主題了，想來時間也不晚了，還是洗洗睡吧

未完待續，這裡有後續可看

相關文章