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

经过这种方式，咱们就能够解决异步数据的获取问题。