<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        理解javascript async的用法

        來源:懂視網 責編:小采 時間:2020-11-27 22:32:00
        文檔

        理解javascript async的用法

        理解javascript async的用法:寫在前面 本文將要實現一個順序讀取文件的最優方法,實現方式從最古老的回調方式到目前的async,也會與大家分享下本人對于thunk庫與co庫的理解。實現的效果:順序讀取出a.txt與b.txt,將讀出的內容拼接成為一個字符串。 同步讀取 const readT
        推薦度:
        導讀理解javascript async的用法:寫在前面 本文將要實現一個順序讀取文件的最優方法,實現方式從最古老的回調方式到目前的async,也會與大家分享下本人對于thunk庫與co庫的理解。實現的效果:順序讀取出a.txt與b.txt,將讀出的內容拼接成為一個字符串。 同步讀取 const readT

        寫在前面

        本文將要實現一個順序讀取文件的最優方法,實現方式從最古老的回調方式到目前的async,也會與大家分享下本人對于thunk庫與co庫的理解。實現的效果:順序讀取出a.txt與b.txt,將讀出的內容拼接成為一個字符串。

        同步讀取

        const readTwoFile = () => {
         const f1 = fs.readFileSync('./a.txt'),
         f2 = fs.readFileSync('./b.txt');
         return Buffer.concat([f1, f2]).toString();
        };

        這種方式最利于我們理解,代碼也很清楚,沒有過多的嵌套,很好的維護,但是這種有著最大的問題,那就是性能,node所倡導的就是異步i/o來處理密集i/o,而同步的讀取,很大的程度上浪費著服務器的cpu,這種方式的弊端明顯的大于好處,所以直接pass掉。(其實node的任何異步編程的解決方案的目標都是要達到同步的語義,異步的執行。)

        利用回調讀取

        const readTwoFile = () => {
         let str = null;
         fs.readFile('./a.txt', (err, data) => {
         if (err) throw new Error(err);
         str = data;
         fs.readFile('./b.txt', (err, data) => {
         if (err) throw new Error(err);
         str = Buffer.concat([str, data]).toString();
         });
         });
        };

        利用回調的方式,實現起來很簡單,直接的嵌套下去就好,但是這種情況下很容易造成的就是不易維護,難以讀懂的情況,最為極致的情況的就是回調地獄。

        Promise實現

        const readFile = file => 
         new Promise((reslove, reject) => {
         fs.readFile(file, (err, data) => {
         if (err) reject(err);
         reslove(data);
         });
         });
        const readTwoFile = () => {
         let bf = null;
         readFile('./a.txt')
         .then(
         data => {
         bf = data;
         return readFile('./b.txt');
         }, 
         err => { throw new Error(err) }
         )
         .then(
         data => {
         console.log(Buffer.concat([bf, data]).toString())
         }, 
         err => { throw new Error(err) }
         );
        };
        

        Promise可以將橫向增長的回調轉化為縱向增長,能解決一些問題,但是Promise造成的問題就是代碼冗余,一眼看過去,全部是then,也不是很爽,但是相比于回調函數嵌套來說,已經有了很大的提升。

        yield

        Generator很多語言中都有,本質上是協程,下面就來看一下協程,線程,進程的區別與聯系:

      1. 進程:操作系統中分配資源的基本單位
      2. 線程:操作系統中調度資源的基本單位
      3. 協程:比線程更小的的執行單元,自帶cpu上下文,一個協程一個棧
      4. 一個進程中可能存在多個線程,一個線程中可能存在多個協程,進程、線程的切換由操作系統控制,而協程的切換由程序員自身控制。異步i/o利用回調的方式來應對i/o密集,同樣的使用協程也可以來應對,協程的切換并沒有很大的資源浪費,將一個i/o操作寫成一個協程,這樣進行i/o時可以吧cpu讓給其他協程。

        js同樣支持協程,那就是yield。使用yield給我們直觀的感受就是,執行到了這個地方停了下來,其他的代碼繼續跑,到你想讓他繼續執行了,他就是會繼續執行。

        function *readTwoFile() {
         const f1 = yield readFile('./a.txt');
         const f2 = yield readFile('./b.txt'); 
         return Buffer.concat([f1, f2]).toString();
        }

        yield下的順序讀取呈現的也是一種順序讀取的方式,對于readFile來看有兩種不同的實現方式,

        利用thunkify

        const thunkify = (fn, ctx) => (...items) => (done) => {
         ctx = ctx || null;
         let called = false;
         items.push((...args) => {
         if (called) return void 0;
         called = true;
         done.apply(ctx, args);
         });
         try {
         fn.apply(ctx, items); 
         } catch(err) {
         done(err);
         }
        };
        

        thunkify函數就是一種柯里化得思想,最后的傳入參數done就為回調函數,利用thunkify可以很輕松的實現yield函數的自動化流程:

        const run = fn => {
         const gen = fn();
         let res;
         (function next(err, data) {
         let g = gen.next(data);
         if (g.done) return void 0;
         g.value(next);
         })();
        };
        

        利用Promise

        const readFile = file => 
         new Promise((reslove, reject) => {
         fs.readFile(file, (err, data) => {
         if (err) reject(err);
         reslove(data);
         });
         });
        const run = fn => {
         const gen = fn();
         let str = null;
         (function next(err, data) {
         let res = gen.next(data);
         if (res.done) return void 0;
         res.value.then(
         data => {
         next(null, data);
         }, 
         err => { throw new Error(err); }
         );
         })();
        };
        run(readTwoFile);
        

        上面兩種方式都可以達到自動執行yield的過程,那么有沒有一種方式,可以兼容這兩種實現方式呢,tj大神又給出了一個庫,那就是co庫,先來看下用法:

        // readTwoFile的實現與上面類似,readFile既可以利用Promise也可以利用thunkify
        // co庫返回一個Promise對象
        co(readTwoFile).then(data => console.log(data));

        來看下co庫的實現,co庫默認會返回一個Promise對象,對于yield之后的值(如上面的res.value),co庫會將其轉換為一個Promise。實現思想很簡單,基本還是利用遞歸的方式,大體的思路如下:

        const baseHandle = handle => res => {
         let ret;
         try {
         ret = gen[handle](res);
         } catch(e) {
         reject(e);
         }
         next(ret);
        };
        function co(gen) {
         const ctx = this,
         args = Array.prototype.slice.call(arguments, 1);
         return new Promise((reslove, reject) => {
         if (typeof gen === 'function') gen = gen.apply(ctx, args);
         if (!gen || typeof gen.next !== 'function') return resolve(gen);
        
         const onFulfilled = baseHandle('next'),
         onRejected = baseHandle('throw');
        
         onFulfilled();
        
         function next(ret) {
         if (ret.done) reslove(ret.value);
         // 將yield的返回值轉換為Proimse
         const value = toPromise.call(ctx, ret.value);
         if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
         return onRejected(new TypeError('yield type error'));
         }
         });
        }
        
        

        toPromise就是將一些類型轉換為Promise,從這里我們可以看出的是可以將哪些類型放在yield后面,這里就來看一個常用的:

        // 把thunkify之后的函數轉化為Promise的形式
        function thunkToPromise(fn) {
         const ctx = this;
         return new Promise(function (resolve, reject) {
         fn.call(ctx, function (err, res) {
         if (err) return reject(err);
         if (arguments.length > 2) res = slice.call(arguments, 1);
         resolve(res);
         });
         });
        }
        

        最近Node已經支持了async/await,可以利用其來做異步操作:

        終極解決

        const readFile = file => 
         new Promise((reslove, reject) => {
         fs.readFile(file, (err, data) => {
         if (err) reject(err);
         reslove(data);
         });
         });
        const readTwoFile = async function() {
         const f1 = await readFile('./a.txt');
         const f2 = await readFile('./b.txt'); 
         return Buffer.concat([f1, f2]).toString();
        };
        readTwoFile().then(data => {
         console.log(data);
        });
        

        async/await做的就是將Promise對象給串聯起來,避免了then的調用方式,代碼非常的易讀,就是一種同步的方式。不再需要借助其他外界類庫(比如co庫)就可以優雅的解決回調的問題。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        理解javascript async的用法

        理解javascript async的用法:寫在前面 本文將要實現一個順序讀取文件的最優方法,實現方式從最古老的回調方式到目前的async,也會與大家分享下本人對于thunk庫與co庫的理解。實現的效果:順序讀取出a.txt與b.txt,將讀出的內容拼接成為一個字符串。 同步讀取 const readT
        推薦度:
        標簽: 使用 用法 js
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 四虎影视永久免费观看网址| 无码人妻精品中文字幕免费东京热| 日韩一品在线播放视频一品免费| 亚洲一区二区三区深夜天堂| 中文免费观看视频网站| 亚洲高清免费在线观看| 2015日韩永久免费视频播放| 亚洲综合小说久久另类区| 99视频全部免费精品全部四虎| 亚洲国产日产无码精品| 免费黄色一级毛片| 黄色网址大全免费| 亚洲开心婷婷中文字幕| 在线观看免费中文视频| 亚洲三级中文字幕| 日韩免费视频在线观看| 极品美女一级毛片免费| 亚洲精品夜夜夜妓女网| 亚洲成年人免费网站| 亚洲中文字幕一二三四区| 国产免费小视频在线观看| 一区二区三区免费视频观看| 久久精品国产亚洲AV麻豆王友容| 亚洲毛片在线免费观看| 美女被艹免费视频| 久久综合图区亚洲综合图区| www.999精品视频观看免费| 美女羞羞视频免费网站| 国产亚洲精品a在线观看app | 一级毛片a免费播放王色电影 | 香蕉高清免费永久在线视频 | 午夜在线免费视频| 亚洲黄色在线视频| 免费国产美女爽到喷出水来视频| a级毛片视频免费观看| 亚洲免费福利视频| 国产啪亚洲国产精品无码| 亚洲电影免费观看| 国产精品成人69XXX免费视频| 亚洲综合久久成人69| 亚洲人成网站观看在线播放|