美文网首页
对 jquery ajax 封装

对 jquery ajax 封装

作者: forever_youyou | 来源:发表于2018-10-26 12:06 被阅读0次

    推荐不了解 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

    相关文章

      网友评论

          本文标题:对 jquery ajax 封装

          本文链接:https://www.haomeiwen.com/subject/xguktqtx.html