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

                }

            })

        }

    })

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

巴特西

ajax 通过回调函数获取异步数据

最新文章

热门文章