ajax 通過回調函數獲取異步數據

這里不再解釋什么是 ajax，以及什么是異步的問題。

我們直接來問題，這里采用 jQuery 的 ajax 方法來獲取數據。

先來看代碼：

 $(function () {
        let db = '';
        $.ajax({
            url: 'http://api.douban.com/v2/movie/top250',  // 豆瓣 api
            async: true,  // 異步獲取數據
            dataType: 'jsonp',  // 豆瓣限制，必須采用跨域的方式獲取數據
            success(result) {
                db = result;
            },
            error(err) {
                console.log(err);
            }
        })
        console.log(db);
    })

來解釋一下，我們首先定義一個變量 db，然后通過 ajax 異步的獲取數據，最后打印出來。

而此時，打印結果為空

原因正是因為異步，當異步執行時，此時為非阻塞式，即，代碼繼續向下執行，所以，此時 db 仍是開始時，我們默認定義的空值。

 

那么，如何才能在這種情況下獲取到 ajax 成功獲取的數據呢，我們可以采用回調函數的方法來解決這個問題。

代碼如下：

 $(function () {
        let db = '';

        (function () {  // 定義一個匿名自執行函數
            getInfo(function () {  // 執行 getInfo 函數，並將一個匿名函數當做參數傳遞過去
                console.log(db);
            })
        })()

        function getInfo(callback) {
            $.ajax({
                url: 'http://api.douban.com/v2/movie/top250',
                async: true,
                dataType: 'jsonp',
                success(result) {
                    db = result;
                    callback(db);  // 執行傳遞過來的匿名函數
                },
                error(err) {
                    console.log(err);
                }
            })
        }
    })

通過這種方式，我們就可以解決異步數據的獲取問題。