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

通过这种方式，我们就可以解决异步数据的获取问题。