Promise 封装 $.ajax

完整文档

 html

<input type="file" multiple  id="filess">
<button onclick="jqueryAjax3()">上传文件ss</button>
<p id="filess_progress" style="width:0px; height: 10px; background-color: #0e90d2"></p>

 js 封装为 Promise 函数

function promiseAjax(method,url,data,header){
    return new Promise(function(resolve, reject){
        $.ajax({
            type: method,
            url: url,
            data:data,
            // 表示不让 jQuery 将 formData 对象处理成字符串，应该直接使用 formData 对象
            processData: false,
            // 使用 FormData 时不能设置 Content-Type，让 FormData 自己处理，所以改成false
            contentType: false,
             headers:header,
            //  默认情况下，标准的跨域请求是不会发送cookie的,携带浏览器已存在的cookie
            xhrFields: {
                withCredentials: true
            },
            //如果 跨域请求 携带不过去去 withCredentials:true,可以使用下面的方法
            beforeSend:function(xhr){
                xhr.withCredentials = true;
                // 也可以在这里定义header
                xhr.setRequestHeader('XX-Device-Type', 'extra_head_data');
                console.log('请求开始');
            },
            dataType: 'json',
            // 上传进度条，不是真实上传到服务端数据
            xhr: function () {
                var xhr = new XMLHttpRequest();
                //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                xhr.upload.addEventListener('progress', function progressFn(e) {
                    //e.total代表总数为多少,e.loaded代表上传了多少
                    var progressPercent = Math.round((e.loaded / e.total) * 100,-2) + '%';
                    $('#filess_progress').width(progressPercent).html(progressPercent);
                    if(e.loaded == e.total){
                        xhr.upload.removeEventListener('progress',progressFn,false)
                    }
                },false);
                return xhr;
            },
            success: function(res) {
                if(res.code==1){
                    // 成功则返回数据
                    resolve(res.data)
                }else{
                    reject('服务端请求失败返回信息')
                }

            },
            error:function(err){
                reject('请求错误信息：'+err.status+' '+err.statusText)
            },
            complete:function () {
                console.log('请求完成')
            }
        })
    })
}

调用 promiseAjax

function jqueryAjax3() {
        var fd = new FormData();
        // 上传单个、多个文件数据
        var file_data = $("input[type='file']")[2].files;
        console.log(file_data);
        // 如果直接写 formData.append("server_files", files); 后端接收不到 server_files
        for (var i = 0; i < file_data.length; i++) {
            fd.append("files["+i+"]", file_data[i]);
        }
        // 发送数据
        fd.append('id',34);
        fd.append('name','abc');
        fd.append('char','中文字符');
        // 请求地址
        var url = "http://casphp.com/api/AjaxRequest/jqueryAjax2";
        // 设置 header
        var header={
            "Authorization":"token_value"
            // ,"Cookie":"cookie_name=cookie_value" //  w3c 不允许设置cookie
        };
        // 调用示例
        promiseAjax('POST',url,fd,header).then(function(res){
            // 成功时调用
            console.log(res)
        }).then(function(err){
            // 失败时调用
            if(err)console.log(err);
        }).catch(function(err){
            // 服务器请求错误
            console.log(err)
        });
    }