封装ajax——使用$.deferred

最新推荐文章于 2024-08-21 20:35:11 发布

明知敏行

最新推荐文章于 2024-08-21 20:35:11 发布

阅读量230

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_36238674/article/details/118295721

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery的$.Deferred对象封装AJAX请求，以简化代码，统一处理contentType、错误和成功状态码的判断。主要思路是通过创建一个Promise对象来管理和协调异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
Jquery的ajax虽好，但还总有些重复的东西可抽象，如contentType，data:JSON.stringfy(params)，error，success中的res的状态码的判断，
type: post,
寻思封装一下，

思路：使用jquery的$.Deferred，获取promise，传递数据

代码如下：

    /**
     * 封装ajax方法
     * @param  {String} url
     * @param  {Object} params
     * @returns {Promise}
     */
    ajax: function (url, params) {
        var deferred = $.Deferred();
        $.ajax({
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(params),
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.error("-------");
                console.error("状态码：" + XMLHttpRequest.status);
                //状态:
                //   0-未初始化
                //   1-正在载入
                //   2-已经载入
                //   3-数据进行交互
                //   4-完成
                console.error("状态:" + XMLHttpRequest.readyState);
                console.error("错误信息:" + XMLHttpRequest.statusText);
                console.error("返回响应信息：" + XMLHttpRequest.responseText);
                console.error("请求状态：" + textStatus);
                console.error(errorThrown);
                console.error("请求失败");
            },
            success: function (result) {
                if (result.state == 1) {
                    deferred.resolve(result.data);
                }
                if (result.state == 0) {
                    console.error(result.msg);
                }
            },
            type: "POST",
            url: url,
        });
        return deferred.promise();
    },