總結異步編程的六種方式

coolpail 發布于2019-08-26 13:47 / 2440人閱讀

摘要：以下為幾種異步編程方式的總結，希望與君共勉。回調函數事件監聽發布訂閱模式異步編程傳統的解決方案回調函數和事件監聽初始示例假設有兩個函數和，是一個需要一定時間的函數。

異步編程

眾所周知 JavaScript 是單線程工作，也就是只有一個腳本執行完成后才能執行下一個腳本，兩個腳本不能同時執行，如果某個腳本耗時很長，后面的腳本都必須排隊等著，會拖延整個程序的執行。以下為幾種異步編程方式的總結，希望與君共勉。

回調函數

事件監聽

發布訂閱模式

Promise

Generator (ES6)

async (ES7)

異步編程傳統的解決方案：回調函數和事件監聽

初始示例：假設有兩個函數, f1 和 f2，f1 是一個需要一定時間的函數。

function f1() {
    setTimeout(function(){
        console.log("先執行 f1")
    },1000)
}
function f2() {
    console.log("再執行 f2")
}

回調函數

因為 f1 是一個需要一定時間的函數，所以可以將 f2 寫成 f1 的回調函數，將同步操作變成異步操作，f1 不會阻塞程序的運行，f2 也無需空空等待，例如 JQuery 的 ajax。

回調函數的demo：

function f1(f2){
    setTimeout(function(){
        console.log("先執行 f1")
    },1000)
    f2()
}
function f2() {
    console.log("再執行 f2")
}

效果如下：

總結：回調函數易于實現、便于理解，但是多次回調會導致代碼高度耦合

事件監聽

腳本的執行不取決代碼的順序，而取決于某一個事件是否發生。

事件監聽的demo

$(document).ready(function(){
     console.log("DOM 已經 ready")
});

發布訂閱模式

發布/訂閱模式是利用一個消息中心，發布者發布一個消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 vue 的父子組件之間的傳值。

發布訂閱模式的 demo

//訂閱done事件
$("#app").on("done",function(data){
    console.log(data)
})
//發布事件
$("#app").trigger("done,"haha")

Promise

Promise 實際就是一個對象，從它可以獲得異步操作的消息，Promise 對象有三種狀態，pending(進行中)、fulfilled（已成功）和rejected（已失敗）。Promise 的狀態一旦改變之后，就不會在發生任何變化,將回調函數變成了鏈式調用。

Promise 封裝異步請求demo

export default function getMethods (url){
    return new Promise(function(resolve, reject){
        axios.get(url).then(res => {
            resolve(res)
        }).catch(err =>{
            reject(err)
        })
    })
}

getMethods("/api/xxx").then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

Generator

Generator 函數是一個狀態機，封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象，使用該對象的 next() 方法，可以遍歷 Generator 函數內部的每一個狀態，直到 return 語句。

形式上，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式， yield是暫停執行的標記。

next() 方法遇到yield表達式，就暫停執行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。

Generator 的 demo

function *generatorDemo() {
  yield "hello";
  yield  1 + 2;
  return "ok";
}

var demo = generatorDemo()

demo.next()   // { value: "hello", done: false } 
demo.next()   // { value: 3, done: false } 
demo.next()   // { value: "ok", done: ture } 
demo.next()   // { value: undefined, done: ture }

async

async函數返回的是一個 Promise 對象，可以使用 then 方法添加回調函數，async 函數內部 return 語句返回的值，會成為 then 方法回調函數的參數。當函數執行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執行函數體內后面的語句。

1.await命令后面返回的是 Promise 對象，運行結果可能是rejected，所以最好把await命令放在try...catch代碼塊中。

async 的 demo1

async function demo() {
  try {
    await new Promise(function (resolve, reject) {
      // something
    });
  } catch (err) {
    console.log(err);
  }
}

demo().then(data => {
    console.log(data)  // 
})

參考文獻
https://developers.google.com...
http://es6.ruanyifeng.com/

GPU云服務器云服務器 ps去除水印的六種方法異步通信方式異步編程 python異步編程

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

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

JavaScript常見的六種繼承方式

摘要：組合繼承也是需要修復構造函數指向的這種方式融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到上面所以必須先調用方法，然后再用子類的構造函數修改。前言面向對象編程很重要的一個方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復用是非常有用的。大部分面向對象的編程語言，...

silvertheo 2019-08-29 16:59 評論0 收藏0
JavaScript常見的六種繼承方式

摘要：組合繼承也是需要修復構造函數指向的這種方式融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到上面所以必須先調用方法，然后再用子類的構造函數修改。前言面向對象編程很重要的一個方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復用是非常有用的。大部分面向對象的編程語言，...

wyk1184 2019-08-16 13:25 評論0 收藏0
JavaScript常見的六種繼承方式

摘要：組合繼承也是需要修復構造函數指向的這種方式融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到上面所以必須先調用方法，然后再用子類的構造函數修改。前言面向對象編程很重要的一個方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復用是非常有用的。大部分面向對象的編程語言，...

anyway 2019-08-02 11:44 評論0 收藏0
JavaScript常見的六種繼承方式

摘要：組合繼承也是需要修復構造函數指向的這種方式融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到上面所以必須先調用方法，然后再用子類的構造函數修改。前言面向對象編程很重要的一個方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復用是非常有用的。大部分面向對象的編程語言，...

helloworldcoding 2019-08-23 12:23 評論0 收藏0
JavaScript繼承的六種方式

這是最近在學習js繼承時看了多篇文章以及自我總結的學習筆記。目錄：一：原型鏈二：構造函數三：原型鏈和構造函數組合繼承四：原型式五：寄生式六：寄生組合式 1、原型鏈 function Super(){ this.name = lily; this.age = 21; this.arr = [1,2,3] } function Sub(){} Sub.prototype = new S...

wujl596 2019-08-21 11:22 評論0 收藏0