淺談JS三座大山之異步和單線程
單線程
但是我們在開發(fā)中，遇到請求網(wǎng)絡(luò)，或者定時任務(wù)的時候，如果等待網(wǎng)絡(luò)請求結(jié)束或者定時任務(wù)結(jié)束的時候再去做其他事情，這樣頁面就會卡住，所以js有異步機制解決這個問題。
異步
異步的特點是不會阻塞后面的代碼執(zhí)行，當(dāng)同步任務(wù)執(zhí)行完畢之后，再執(zhí)行異步任務(wù)。相對的，同步會阻止代碼執(zhí)行。異步任務(wù)的應(yīng)用主要有網(wǎng)絡(luò)請求和定時任務(wù)。
異步是通過callback的方式實現(xiàn)的，在callback里面執(zhí)行異步執(zhí)行的代碼，但是有一些場景比如我們有三個網(wǎng)絡(luò)請求abc需要依次執(zhí)行，在a的回調(diào)里發(fā)起b請求，在b的回調(diào)里發(fā)起c請求，這樣會造成一種很混亂的寫法，稱之為回調(diào)地獄，可以試想一下，如果頁面邏輯過于復(fù)雜，需要依次調(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ù)，當(dāng)執(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)絡(luò)請求的問題：
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)容，更多關(guān)于JS三座大山之異步和單線程的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了javascript修改表格背景色實例，代碼簡單，大家參考使用吧2013-12-12
很早之前就想分享這篇心得，幸之今天能在這里完成，好了，話不多說，進入正題。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
JavaScript是一種單線程語言,它在任何給定時間只能執(zhí)行一個任務(wù),然而js確能夠處理異步操作,這得益于其事件循環(huán)（Event Loop）機制,今天這篇文章帶領(lǐng)大家深入理解JavaScript單線程特性,以及講解事件循環(huán)和js多線程知識2023-10-10
JavaScript實現(xiàn)頁面5秒后自動跳轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實現(xiàn)頁面5秒后自動跳轉(zhuǎn)的方法,涉及javascript遞歸調(diào)用與計時函數(shù)setTimeout的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
Ajax實現(xiàn)省市區(qū)三級聯(lián)動實例代碼
這篇文章介紹了Ajax實現(xiàn)省市區(qū)三級聯(lián)動的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Javascript中的基本類型和引用類型的相關(guān)資料,包括基本類型和引用類型的概念及區(qū)別，數(shù)據(jù)類型檢測給大家詳細介紹了js基本類型和引用類型，非常不錯，需要的朋友可以參考下2022-11-11
前端與后端數(shù)據(jù)交互是軟件開發(fā)中不可或缺的一環(huán),下面這篇文章主要給大家介紹了關(guān)于前端給后端傳數(shù)據(jù)的五種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了ionic實現(xiàn)可滑動的tab選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了p5.js入門教程之鼠標交互的示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03