但是我們在開發(fā)中，遇到請求網(wǎng)絡，或者定時任務的時候，如果等待網(wǎng)絡請求結(jié)束或者定時任務結(jié)束的時候再去做其他事情，這樣頁面就會卡住，所以js有異步機制解決這個問題。

異步的特點是不會阻塞后面的代碼執(zhí)行，當同步任務執(zhí)行完畢之后，再執(zhí)行異步任務。相對的，同步會阻止代碼執(zhí)行。異步任務的應用主要有網(wǎng)絡請求和定時任務。

異步是通過callback的方式實現(xiàn)的，在callback里面執(zhí)行異步執(zhí)行的代碼，但是有一些場景比如我們有三個網(wǎng)絡請求abc需要依次執(zhí)行，在a的回調(diào)里發(fā)起b請求，在b的回調(diào)里發(fā)起c請求，這樣會造成一種很混亂的寫法，稱之為回調(diào)地獄，可以試想一下，如果頁面邏輯過于復雜，需要依次調(diào)用10個接口，那么代碼的可讀性會非常非常差，我們?nèi)绻吹搅藙e人的這種代碼難免內(nèi)心奔跑一萬只神獸。

promise基本用法：

let fun1 = function(flag){ return new Promise((resolve,reject)=>{ if(flag){setTimeout(() => {resolve('success')}, 1000); }else{setTimeout(() => {reject('fail')}, 1000); } })}fun1(true).then((res)=>{ console.log(res)//success}).catch((res)=>{ console.log(res)})fun1(false).then((res)=>{ console.log(res)}).catch((res)=>{ console.log(res)//fail})

上面是一個最簡單的promise函數(shù)，promise函數(shù)返回一個Promise對象，參數(shù)是一個函數(shù)，接收兩個參數(shù)resolve和reject，這兩個參數(shù)也是函數(shù)，當執(zhí)行resolve()或者reject()的時候，函數(shù)返回.

如果執(zhí)行了resolve(),就會在調(diào)用的時候執(zhí)行then()方法，并接收resove()返回的參數(shù);

如果執(zhí)行了reject(),就會在調(diào)用的時候執(zhí)行catch()方法，并接收reject()返回的參數(shù);

用promise重新實現(xiàn)一下上面三個網(wǎng)絡請求的問題：

let callService = function(url){ return new Promise((resolve,reject)=>{ axios.get(url).then((res)=>{ resolve(res) }).catch((err)=>{ reject(err) }) }) } const url1 = '/user/url1' const url2 = '/user/url2' const url3 = '/user/url3' callService(url1).then((res)=>{ // do something return callService(url2) }).then(()=>{ // do something return callService(url3) }).then((res)=>{ // do something }).catch((err)=>{ console.log(err) })

用上面的寫法重新實現(xiàn)之后，寫法上只會有一層，而不會陷入層層的回調(diào)之中。

promise.all

promise.all可以將多個promise包裝成一個新的實例，成功的時候返回一個數(shù)組，誰先失敗返回誰的值。

promise.all方法可以幫我們處理日常開發(fā)中多接口同時調(diào)用的處理問題。

let p1 = new Promise((resolve, reject) => { resolve(’成功了’)})let p2 = new Promise((resolve, reject) => { resolve(’success’)})Promise.all([p1, p2]).then((result) => { console.log(result) //[’成功了’, ’success’]}).catch((error) => { console.log(error)})

promise.race

這個方法的作用是多個接口賽跑，哪個跑得快就返回哪個

Promise.race([p1, p2]).then((result) => { console.log(result)}).catch((error) => { console.log(error) })

以上就是淺談JS三座大山之異步和單線程的詳細內(nèi)容，更多關于JS三座大山之異步和單線程的資料請關注好吧啦網(wǎng)其它相關文章！