js異步執行的各類方式 | 8月更文挑戰

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

首先，你們都知道js是單線程的，那咱們不少方法執行的時候不須要同步，而須要異步，該怎麼執行呢？可是單線程基於異步的時候又會怎麼樣執行呢？瀏覽器是多線程的，與內核的控制配合保持同步執行，一個瀏覽器至少實現3個常駐線程：js引擎線程，GUI渲染線程，瀏覽器事件觸發線程(UI線程)。

1、setTimeout實現異步

例如：
let code = 0;function fun1() { 
    //請求接口獲得code
}function fun2() { 
    //請求接口用code換取key
}
fun1();
fun2();
//這時候須要fun1先執行，再執行fun2
//能夠改成:
fun1();
setTimeout(){=>{fun2();},500}
複製代碼

注：使用setTimeout可能會出現問題，必須第一個方法還沒返回，可是由於setTimeout時間到了，就執行了fun2()這時候可能code尚未，就會出現bug，因此不是很是推薦。

2、使用callback回調函數執行

//仍是剛剛的方法b體，改成：
let code = 0;
function fun1(callback) { 
    //請求接口獲得code,success中調用callback();
    callback();
}
function fun2() { 
    //請求接口用code換取key
}
fun1(fun2());
複製代碼

注：這樣不會出現setTimeout發生的問題，可是若是不少方法之間存在關聯關係，可能會形成代碼連貫性錯誤，一個方法執行不下去可能整個頁面和js代碼就執行不下去了。

3、promise對象

promise是一個對象，對象和函數的區別就是對象能夠保存狀態，函數不能夠（除閉包）。主要用於異步操做，能夠把異步操做隊列化。

promise有三種狀態：

      pending 等待

      fulfilled 操做成功

      rejected 操做失敗

promise從pending狀態中轉變只能是fulfilled或rejected，且改變後不會再變

let num = 10;
let p1 = new Promise(function(reslove){
    setTimeout(()=> {
        if(num > 10) {
            reslove(20);
        }else {
            reject(new Error('is a bug~'));
        }
    },1000)
})function fun2() { 
    num++;
}p1.then(fun2());//fun1返回一個promise，指定回調函數fun2()，能夠執行多個.then();（fun2()最好也是promise對象，這裏沒有詳細寫）
複製代碼

Promise.all()批量執行

let numFun = (num) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num)
    }, 1000)
  })
}

let p1 = numFun(1)
let p2 = numFun(2)

Promise.all([p1 p2]).then((result) => {  console.log(result); //打印[1,2]
}).catch((error) => {
  console.log(error)
})
複製代碼

寫的不是很全，今天身體很差，寫的不詳細，對不起，等挑戰結束我再編輯一下

4、使用async、await

async關鍵字表示整個代碼中有異步執行的方法，可是也能夠沒有；能夠傳不少參數沒有限制；會默認返回promise對象的resolve值。

await只能在async定義的方法中使用，不然會報錯，後面跟promise對象，若是不是的話，系統會自動轉化爲promise對象

//async使用：
async function fun1() {
    return "hello async";
}

const result = fun1(); // 返回一個Promise對象
//和promise同樣，能夠執行then方法
fun1().then(str=> {
    console.log(str);})
複製代碼

和await配合使用

async function fun1() {
    let res = await fun2(1);
    console.log(res);
}

function fun2(num){
    num++;
    return num;}
複製代碼

5、事件監聽

事件類型有：click，on，bind，listen，addEventListener，observe等

事件監聽取決於你何時觸發，致使異步

<div id="handlerClick1">提交1</div>

function fun1() {
    setTimeout(()=> {
        fun2();
    })
}
$("#handlerClick1").click(function() {
    fun1();
})
function fun2() {
    console.log(23);
}
複製代碼

6、發佈訂閱者模式（觀察者模式）

這個簡單來講就是你在elm點了一個外賣（訂閱subscriube），平臺收到你的請求後開始執行配送，外賣小哥送達後完成訂單（publish('done')）告訴平臺已經結束這一單。

//以jq爲例
jQuery.subscribe('done',fun1);

function fun1() {
    //詳細執行商家作菜和配送的操做
    jQuery.publish('done');//配送完告訴elm完成訂單
}
複製代碼

一共整理了6種不知道全不全，寫了兩個小時，感受寫的挺少的，當學習了~