我們通過(guò)學(xué)習(xí)都是知道JavaScript是一門單線程的語(yǔ)言,我們都知道雙線程肯定會(huì)比單線程好,所以單線程在執(zhí)行一些比較消耗時(shí)間的操作的時(shí)候就需要使用異步執(zhí)行的操作,不然很容易崩掉。那么今天我們就來(lái)說(shuō)說(shuō):“javascript怎么解決異步問題?異步解決方案分享!”這個(gè)問題吧!
1、使用回調(diào)函數(shù)有學(xué)過(guò)和使用過(guò)jQuery的小伙伴就會(huì)知道這個(gè)方法,這是個(gè)將自己作為變量傳遞給另一個(gè)函數(shù)的函數(shù),是在主體函數(shù)執(zhí)行完成之后在執(zhí)行的。代碼如下:
let delayWithCallback = (time, callback) => {
console.log('handle...')
setTimeout(() => {
if (typeof callback === 'function') {
callback(`success`)
}
}, time)
}
代碼中可以看到我們?cè)赾allback方法里面處理回調(diào)問題。
2.使用Promise這個(gè)方法是通過(guò)本身構(gòu)造函數(shù)在接受一個(gè)函數(shù)作為參數(shù),從而分別來(lái)表示操作執(zhí)行成功后的回調(diào)函數(shù)和異步操作執(zhí)行失敗后的回調(diào)函數(shù)
,Promise的參數(shù)分別是resolve和reject;代碼如下:
let index = 1;
let delayWithPromise = (time) => {
return new Promise((resolve, reject) => {
console.log(`task${index} handle...`)
index++
setTimeout(() => {
resolve('success')
}, time)
})
}
我們還可以在這個(gè)方法之上使用then方法進(jìn)行回調(diào)。代碼如下:
let func2 = () => {
console.log('start')
delayWithPromise(1000).then(result => {
console.log(result)
console.log('end')
})
}
func2()
通過(guò)代碼我們可以知道then這個(gè)方式是在Promise.prototype.then()中接收兩個(gè)參數(shù)來(lái)實(shí)現(xiàn)的。
3.使用async或者await的解決異步問題由于這兩個(gè)方法是ES7中的新特性所以關(guān)于他們的用法有這些特點(diǎn):
(1).我們可以在function前面加async關(guān)鍵字就可以表示這是個(gè)async函數(shù);而且async的返回值是一個(gè)Promise對(duì)象,所以我們還可以用then方法添加回調(diào)函數(shù)。
(2).當(dāng)我們?cè)谑褂胊wait的時(shí)候后面跟著的應(yīng)該是個(gè)promise對(duì)象,如果不是的話就會(huì)被轉(zhuǎn)成個(gè)含有resolve的Promise對(duì)象,而且await是表示在等待promise返回結(jié)果了之后再繼續(xù)執(zhí)行的。
下面是一個(gè)相關(guān)的代碼:
let func6 = async () => {
console.log('start')
let result = await delayWithPromise(1000);
console.log(result)
console.log('end')
}
func6()
(3).使用async或者await一個(gè)個(gè)執(zhí)行代碼如下:
let func7 = async () => {
console.log('start')
let result1 = await delayWithPromise(500)
let result2 = await delayWithPromise(500)
console.dir(result1, result2)
console.log('end')
}
func7()
當(dāng)我們使用這個(gè)方法的時(shí)候這個(gè)功能出來(lái)是會(huì)依照程序一步步來(lái)的。還設(shè)有500ms的時(shí)間間隔。
(4).使用async或者await同時(shí)執(zhí)行方法
let func8 = async () => {
console.log('start')
let [result1, result2] = await Promise.all([
delayWithPromise(500),
delayWithPromise(500)
])
console.dir(result1, result2)
}
func8()
總結(jié):
以上就是今天有關(guān)于“javascript怎么解決異步問題?異步解決方案分享!”這個(gè)問題的方法和使用。更多有關(guān)的學(xué)習(xí)知識(shí)我們都可以在W3cschool中進(jìn)行搜素學(xué)習(xí)和了解。