非同步的發展，順手學會怎麼處理多請求

顏醬發表於2019-03-02

TL;DR

非同步：先幹一件事，中間去幹其他的事，最終再回來幹這件事
高階函式是函式作為引數或者函式作為返回值，作用是批量生成函式和預置函式做為引數（可以快取函式，當達到條件時執行該函式）
非同步的發展流程：callback -> promise -> generator + co -> async+await(語法糖)
回撥函式金字塔處理多請求 -> 哨兵函式處理多請求 -> promise處理多請求 -> co處理多請求 -> async處理多請求
手寫實現co、bluebird的promisify和promisifyAll

非同步的發展流程

非同步：先幹一件事中間去幹其他的事，最終在回來幹這件事
同步：同步連續執行
非同步的發展流程：callback -> promise -> generator + co -> async+await(語法糖)
非同步發展的最終結果就是，像同步一樣的寫法，簡單優雅易懂

回撥函式的金字塔地獄版本1.0

普通的讀到2個檔案之後才能進行某件事，可能最開始的手段：

// 本地寫3檔案，index.js寫以下程式碼 template.txt寫些html的程式碼，data.txt寫些json資料，然後命令列執行 node index.js
let fs = require(`fs`)
fs.readFile(`template.txt`,`utf8`,function(err,template){ // error-first
    fs.readFile(`data.txt`,`utf8`,function(err,data){ // error-first
        console.log({template:template,data:data});
    });
});
複製程式碼

理解高階函式

先介紹高階函式的含義和用法。

含義：函式作為引數或者函式作為返回值
用法：批量生成函式和預置函式做為引數

批量生成函式

比如判斷變數是不是物件或者陣列

function isObject(content){
    return Object.prototype.toString.call(content) === `[object Object]`;
}
function isArray(content){
    return Object.prototype.toString.call(content) === `[object Array]`;
}

複製程式碼

但這樣一個個寫很麻煩，可以寫一個函式生成這些函式，這樣簡單粗暴。在平時你發現函式裡有重複程式碼的時候，可以考慮封裝一個高階函式生成函式~

function isType(type){
    return function(content){
        return Object.prototype.toString.call(content) === `[object ${type}]`;
    }
}

const isObject = isType(`Object`)
const isArray = isType(`Array`)

複製程式碼

預置函式做為引數

lodash裡面有個after的函式，功能是函式呼叫幾次之後才真正執行函式，很神奇是吧，走一個~

function after(times,fn){
    return function(){
            if(--times===0){
            fn()
        }
    }
}
let eat = after(3,function(){
    console.log(`飽了`)
})
eat();
eat();
eat(); // 這次才會執行


複製程式碼

舉一反三，換句話說這樣可以快取函式，當達到條件時執行該函式。這就超級厲害了~

高階函式的哨兵變數版2.0

由上面例子得到的啟發，再看前面的例子

// 本地寫3檔案，index.js寫以下程式碼 template.txt寫些html的程式碼，data.txt寫些json資料，然後命令列執行 node index.js

function after(requestCounts,fn){
    let dataSet = {} // 資料收集，請求跟結果一一對應，所以存為物件，這個變數通常稱為哨兵變數
    // return的函式就是單個讀取到結果之後在其回撥函式裡執行的函式，所以可以拿到資料
    return function(key,data){
        dataSet[key] = data
        // 所有請求都拿到結果之後
        if(Object.keys(dataSet).length ===requestCounts){
            fn(dataSet)
        }
    }
}

let out = after(2,function(res){
    console.log(res);
})
let fs = require(`fs`)
fs.readFile(`template.txt`,`utf8`,function(err,data){out(`template`,data)})
fs.readFile(`data.txt`,`utf8`,function(err,data){out(`data`,data)});

複製程式碼

這樣很方便處理併發請求，請求的數量傳入即可。

理解promise

可以對照promise的網站，自己試著實現promise。

// 大概用法
var y = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let x = Math.random()
        if(x >0.5){
            resolve(x)
        }else{
            reject(x)
        }
    },100)
})
console.log(y)
var yThen = y.then((data)=>{
    console.log(`then`,data)
},(data)=>{
    console.log(`catch`,data)
})
複製程式碼

promise版本3.0

let fs = require(`fs`)
function readFilePro(filename){
    return new Promise((resolve,reject)=>{
        fs.readFile(filename,`utf8`,function(err,data){err?reject(err):resolve(data)});
    })
}

Promise.all([readFilePro(`template.txt`),readFilePro(`data.txt`)]).then(res=>{
    console.log({template:res[0],data:res[1]})
})
複製程式碼

理解生成器generator

生成器函式雖然是一個函式，但和普通函式不一樣，普通函式一旦呼叫就會執行完。

生成器函式用* 來標識
呼叫的結果是一個迭代器迭代器有一個next方法
遇到暫停點yield就停下來，直到執行迭代器的next，最後才能返回這個函式的return
yield後面跟著的是value的值
yield等號前面的是我們當前呼叫next傳進來的值
第一次next傳值是無效的
當done為true的時候就是value就是生成器return的值

// 生成器函式有個特點需要加個*
function *go(a){
    console.log(1)
    // 此處b是外界輸入，這行程式碼實現輸入輸出
    let b = yield a
    console.log(2)
    let c = yield b
    console.log(3)
    return `o`
}
// 生成器函式和普通函式不一樣呼叫他函式不會立刻執行
// 返回生成器的迭代器，迭代器是一個物件
let it = go(`a`)
// next第一次執行不需要傳引數,想想也是，沒有意義
let r1 = it.next()
console.log(r1) // {value:`a`,done:false}
let r2 = it.next(`B`)
console.log(r2) // {value:`B`,done:false}
let r3 = it.next(`C`)
// 當done為true的時候就是return的值
console.log(r3) // {value:`o`,done:true}
複製程式碼

理解co，讓生成器自動執行

co是大神tj寫出來的，超棒的小夥子啊，才23歲好像，再次感慨人與人之間的差距簡直比人與狗之間的差距還大，麵條淚~
co讓生成器自動執行的原理其實想想就是讓next執行到結束為止。
!!!!必須特別強調: co 有個使用條件，generator 函式的 yield 命令後面，只能是 Thunk 函式或 Promise 物件。

// gen是生成器generator的簡寫
function co(gen){
    let it = gen()
    return new Promise((resolve,reject)=>{
        !function next(lastValue){
            let {value,done} = it.next(lastValue)
            if(done){
               resolve(value)
            }else{
                // 遞迴，這裡也看出來，這也是為啥yield後面必須是promise型別
                value.then(next)
            }
        }()
    })
}
co(go)
複製程式碼

promise和co版本的4.0

// 本地寫3檔案，index.js寫以下程式碼 template.txt寫些html的程式碼，data.txt寫些json資料，然後命令列執行 node index.js

let fs = require(`fs`)
function readFilePro(filename){
    return new Promise((resolve,reject)=>{
        fs.readFile(filename,`utf8`,function(err,data){err?reject(err):resolve(data)});
    })
}
function *gen(){
    // let res = {}
    let template = yield readFilePro(`template.txt`)
    let data = yield readFilePro(`data.txt`)
    return {template,data}
}
// 也可以直接引入 co的庫 npm i co  let co = require(`co`)
function co(gen){
    let it = gen()
    return new Promise((resolve,reject)=>{
        !function next(lastValue){
            let {value,done} = it.next(lastValue)
            if(done){
               resolve(value)
            }else{
                // 遞迴，這裡也看出來，這也是為啥yield後面必須是promise型別
                value.then(next)
            }
        }()
    })
}
co(gen).then(res=>console.log(res))
複製程式碼

async和await版本5.0

async和await是promise和generator的語法糖。其實go函式就是gen函式裡面的yield變成await~
因為async函式其實有點co的感覺，await後面必須是promise~

// 本地寫3檔案，index.js寫以下程式碼 template.txt寫些html的程式碼，data.txt寫些json資料，然後命令列執行 node index.js
let fs = require(`fs`)
// readFilePro也可以用bluebird生成
function readFilePro(filename){
    return new Promise((resolve,reject)=>{
        fs.readFile(filename,`utf8`,function(err,data){err?reject(err):resolve(data)});
    })
}
async function go(){
    let template = await readFilePro(`template.txt`)
    let data = await readFilePro(`data.txt`)
    // 這裡的return必須用then才能拿到值，因為是語法糖啊~
    return {template,data}
}

go().then(res=>console.log(res))
複製程式碼

這也是最終版啦，非同步寫成同步的感覺~

bluebird

再叨叨點bluebird，它能把任意通過回撥函式實現的非同步API換成promiseApi。
常用的方法兩個：promisify和promisifyAll。
promisify將回撥函式實現的非同步API換成promiseApi。
promisifyAll遍歷物件上所有的方法然後對每個方法新增一個新的方法 Async。

let fs = require(`fs`)
// npm i bluebird
let Promise = require(`bluebird`)
let readFilePro = Promise.promisify(fs.readFile)
// 好像很眼熟是不是 哈哈哈哈
readFilePro(`template.txt`,`utf8`).then((template)=>{console.log(template)})
Promise.promisifyAll(fs)
// console.log(fs) // 發現fs的方法多了
fs.readFileAsync(`template.txt`,`utf8`).then((template)=>{console.log(template)})
複製程式碼

其實感覺可以手寫實現的有木有，來走一個~

let fs = require(`fs`)
// 先看簡單版的
function readFilePro(filename,encode){
    return new Promise((resolve,reject)=>{
        fs.readFile(filename,encode,function(err,data){err?reject(err):resolve(data)});
    })
}

// 高階函式生成上面的函式
function promisify(fn){
    // 這裡生成readFilePro類似的函式，這裡因為引數不一定，所以用args
    return function(...args){
        return new Promise((resolve,reject)=>{
            // 因為回撥函式在最後一個，所以用拼接的方式，call的用法知道哈~
            fn.call(null,...args,function(err,data){err?reject(err):resolve(data)})
        })
    }
}
function promisifyAll(object){
    for (const key in object) {
        if (object.hasOwnProperty(key) && typeof object[key]===`function`) {
            object[`${key}Async`] = promisify(object[key])
        }
    }
    return object
}
let readFilePro = promisify(fs.readFile)
// 好像很眼熟是不是 哈哈哈哈
readFilePro(`template.txt`,`utf8`).then((template)=>{console.log(template)})

promisifyAll(fs)
// console.log(fs)
fs.readFileAsync(`template.txt`,`utf8`).then((template)=>{console.log(template)})

複製程式碼

多請求

其實如果看懂到這裡，對於多請求的實現也就不是大難事了。請求能用fetch用fetch哈。
多請求分為併發請求（請求之間沒有關係，但需要拿到所有請求結果）和串發請求（後面請求必須要拿到前面請求的結果）。
對於併發請求，感覺Promise.all處理更簡單，串發請求那就用await吧~

DeferredResult——非同步請求處理
2019-01-17
非同步
直播帶貨原始碼，非同步處理中會處理兩次請求
2024-03-16
原始碼非同步
前端不會這個就別想著還房貸了？論怎麼讓非同步請求按請求順序返回
2019-03-26
前端非同步
Retrofit2.5怎麼做到網路請求的處理的？
2019-04-11
Python web伺服器怎麼處理請求
2021-09-11
PythonWeb伺服器
tornado非同步請求非阻塞
2014-01-13
非同步
SpringBoot 教程之處理非同步請求
2019-05-09
Spring Boot非同步
python非同步IO與批量請求處理
2018-01-17
Python非同步
用.Net處理xmlHttp傳送非同步請求
2008-09-04
XMLHTTP非同步
linux如何處理多連線請求？
2019-05-23
Linux
Node.js如何處理多個請求？
2023-11-08
Node.js
[JS] Ajax請求會話過期處理
2015-12-15
JS會話
iOS 同步請求非同步請求 GET請求 POST請求
2014-02-20
iOS非同步
4、Ktor學習-處理HTTP請求;
2019-03-04
HTTP
請求資料處理
2018-11-14
wordpress 處理 ajax 請求
2017-11-08
Mongodb請求處理流程
2015-08-20
MongoDB
.NET處理HTTP請求
2011-08-17
HTTP
處理REST SOE請求
2013-01-27
REST
如何使用策略模式處理多種型別請求
2018-10-21
模式型別
併發請求的優先順序
2009-07-22
Apache Tomcat如何高併發處理請求
2022-03-29
ApacheTomcat
SpringMVC請求處理流程
2016-10-11
SpringMVC
請求處理管道個人理解
2017-08-27
nginx處理http請求流程
2015-01-19
NginxHTTP
jQuery：在一個回撥中處理多個請求
2014-05-27
jQuery
AngularJS中的$http快取以及處理多個$http請求
2016-02-06
AngularJSHTTP快取
OKHttp原始碼學習同步請求和非同步請求（二）
2018-04-26
HTTP原始碼非同步
【面試普通人VS高手系列】Dubbo的服務請求失敗怎麼處理？
2022-04-18
面試
多執行緒應用–Http請求阻塞回撥處理
2019-01-15
執行緒HTTP
多執行緒應用--Http請求阻塞回撥處理
2018-09-05
執行緒HTTP
yai 請求預處理指令碼
2020-08-08
AI指令碼
Go Web如何處理Web請求?
2019-03-27
GoWeb
nginx 如何處理一個請求
2019-01-19
Nginx
Laravel請求處理管道理解
2020-10-20
Laravel
自定義處理頁面請求
2005-04-21
Spring MVC的請求處理邏輯
2023-03-14
SpringMVC
學習tomcat-如何建立連線，處理請求
2020-12-21
Tomcat