javascript如何解決異步問題

這篇文章主要講解了“javascript如何解決異步問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript如何解決異步問題”吧！

1、使用回調函數

有學過和使用過jQuery的小伙伴就會知道這個方法，這是個將自己作為變量傳遞給另一個函數的函數，是在主體函數執行完成之后在執行的。代碼如下：

let delayWithCallback = (time, callback) => {
    console.log('handle...')
    setTimeout(() => {
        if (typeof callback === 'function') {
            callback(`success`)
        }
    }, time)
}

代碼中可以看到我們在callback方法里面處理回調問題。

2.使用Promise

這個方法是通過本身構造函數在接受一個函數作為參數，從而分別來表示操作執行成功后的回調函數和異步操作執行失敗后的回調函數

，Promise的參數分別是resolve和reject；代碼如下：

let index = 1;
let delayWithPromise = (time) => {
    return new Promise((resolve, reject) => {
        console.log(`task${index} handle...`)
        index++
        setTimeout(() => {
            resolve('success')
        }, time)
    })
}

我們還可以在這個方法之上使用then方法進行回調。代碼如下：

let func2 = () => {
    console.log('start')
    delayWithPromise(1000).then(result => {
        console.log(result)
        console.log('end')
    })
} 
func2()

通過代碼我們可以知道then這個方式是在Promise.prototype.then()中接收兩個參數來實現的。

3.使用async或者await的解決異步問題

由于這兩個方法是ES7中的新特性所以關于他們的用法有這些特點：

(1).我們可以在function前面加async關鍵字就可以表示這是個async函數；而且async的返回值是一個Promise對象，所以我們還可以用then方法添加回調函數。

(2).當我們在使用await的時候后面跟著的應該是個promise對象，如果不是的話就會被轉成個含有resolve的Promise對象，而且await是表示在等待promise返回結果了之后再繼續執行的。

下面是一個相關的代碼：

let func6 = async () => {
    console.log('start')
    let result = await delayWithPromise(1000);
    console.log(result)
    console.log('end')
}
func6()

(3).使用async或者await一個個執行代碼如下：

let func7 = async () => {
    console.log('start')
    let result1 = await delayWithPromise(500)
    let result2 = await delayWithPromise(500)
    console.dir(result1, result2)
    console.log('end')
}
func7()

當我們使用這個方法的時候這個功能出來是會依照程序一步步來的。還設有500ms的時間間隔。

(4).使用async或者await同時執行方法

let func8 = async () => {
    console.log('start')
    let [result1, result2] = await Promise.all([
        delayWithPromise(500),
        delayWithPromise(500)
    ])
    console.dir(result1, result2)
}
func8()

感謝各位的閱讀，以上就是“javascript如何解決異步問題”的內容了，經過本文的學習后，相信大家對javascript如何解決異步問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！