对 jquery ajax 封装

2018-10-26  本文已影响0人  forever_youyou

推荐不了解 es6 promise 的先自行补习下

<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script>
    // jQuery Deferred is based on the CommonJS Promises/A design.
    // 这句话来自jquery官方文档,自行理解

    /**
     * 推荐对jquery ajax 封装不在options中传 success 和 error 回调
     * 而是直接返回一个jQuery 的 Deferred Object (兼容性:jquery >= 1.5), ie8 等浏览器兼容性均没有问题
     * 然后链式调用这个返回对象的各种方法
     */
    function myAjax(options) {
        // 此处省略对 options 的各种判断
        /**
         * 此处返回的是一个 jQuery 的 Deferred Object, (兼容性:jquery >= 1.5)
         * 可以对这个返回值多次链式调用其回调方法: done, fail, always, abort, error 等, 具体方法说明请参看官方文档
         */
        return $.ajax(options)
            .done(function (data) {
                console.log('封装处统一处理:', data)
            })
            .fail(function (err) {
                console.log('封装处统一处理:', err)
            })
            .always(function () {
                console.log('封装处统一处理:', '这里一定执行')
            });
    }

    // 调用示例
    $(function () {
        var options = {
            url: 'a.json' // a.json 内容: {"name": "张三", "age": 18}
        };
        myAjax(options)
            .done(function (data) {
                console.log('调用处:', data)
            })
            .fail(function (err) {
                console.log('调用处:', err)
            })
            .always(function () {
                console.log('调用处:', '这里一定执行')
            })
            .done(function (data) {
                console.log('调用处可以多次调用这些回调:', '比如这里再次调用 done')
            });
    });
</script>
图片.png
上一篇下一篇

猜你喜欢

热点阅读