ajax异步上传文件返回undefined

Question

ajax跨域上传文件，封装了一个上传文件的方法sendFilePost，上传文件的时候使用async: false同步上传就不会弹出等待框，返回的结果没问题，但是使用了异步的方法async: ture，就返回了undefined，不知道改如何修改，大神帮忙改一下，如何异步不返回undefined

接口返回数据

//成功
{
    "status":200,
    "info":"导入成功,共导入100条记录 "
}
//失败
{
    "status":400,
    "info":"第2行,选手名称不能为空"
}

  $.messager.progress({
            title: '导入数据',
            text: '正在导入数据，请稍后....'
        });
       var data = new FormData($("#form1")[0]);
            var result = sendFilePost("/admin/import/importPlayer", data);
            if (result.status == 200) {
                $.messager.progress('close');
                $.messager.alert('上传成功', result.info);
            } else {
                $.messager.progress('close');
                $.messager.alert('提示', result.info, 'error');
            }
            e.get(0).value = "";


function sendFilePost(url, data) {
    var res = '';
    $.ajax({
        type: "POST",
        url: basePath + url,
        data: data,
        //async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            res = result;
        }
    }).done(function (res) {
    }).fail(function (res) {
    });
    ;
    return res;
}

Answer 1

ajax是异步的你不能直接获取result的值
第一种用回调函数获取

function sendFilePost(url, data,successCb,failCb) {
    $.ajax({
        type: "POST",
        url: basePath + url,
        data: data,
        //async: false,
        cache: false,
        contentType: false,
        processData: false,
    }).done(function (res) {
        successCb(res)    
    }).fail(function (res) {
        failCb(res)
    });
}
//调用
sendFilePost(url,data,function(res){},function(res){})

第二种直接把ajax返回出去

function sendFilePost(url, data) {
    return $.ajax({
        type: "POST",
        url: basePath + url,
        data: data,
        //async: false,
        cache: false,
        contentType: false,
        processData: false,
    })
}
//调用
sendFilePost(url,data).done(function(res){}).fail(function(res){})

Answer 2

使用promise做流程控制

const sendFilePost = (url, data) => new Promise((resolve, reject) => {
    $.ajax({
        beforeSend(){
            $.messager.progress({
                title: '导入数据',
                text: '正在导入数据，请稍后....'
            });
        },
        //一些其它配置
    }).done(res => resolve(res))
        .fail(err => reject(err))
        .always(()=>$.messager.progress('close'));
});
const data = new FormData($("#form1")[0]);
sendFilePost.then(res=>{
    //ajax done的handler
}).catch(err=>{
    //ajax错误处理
})

如果你习惯了同步的语法，可以试试async/await

const _sendFilePost = (url, data) => new Promise((resolve, reject) => {
    $.ajax({
        beforeSend() {
            $.messager.progress({
                title: '导入数据',
                text: '正在导入数据，请稍后....'
            });
        },
        //一些其它配置
    }).done(res => resolve(res))
        .fail(err => reject(err))
        .always(() => $.messager.progress('close'));
});
const data = new FormData($("#form1")[0]);

const HandleSend = async function (url, data) {
    try {
        const result = await _sendFilePost(url, data);
        //ajax成功处理写在此处
    } catch (error) {
        //ajax失败的处理写在此处
    }
};
//调用
HandleSend("/admin/import/importPlayer", data);

Answer 3

undefined 估计没有到success那一步吧，调试一下。