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);
                }
            })
        }
    })

經過這種方式，咱們就能夠解決異步數據的獲取問題。