axios配置fileReader.onload处理异步请求

问题场景:前端通过后端接口下载文件,返回值是一个blob文件,需要通过fileReader.onload()内部才能做各种判断,并且将res.data返回出去,但是fileReader.onload()是一个异步方法,直接reutrn fileReader.onload()是返回undefined。所以问题就是怎么把fileReader.onload()内部的变量传递出去呢?

一开始是想用闭包,但结果发现是undefined,应该是fileReader.onload()本身就没有返回值。结果就被卡住了。

后来想到一个新办法。

很简单,核心就是在第一个.then的处理逻辑中,继续返回Promise,然后在下一个Promise的.then中进行return
代码如下:


/**
 * 下载(post请求)
 * @param {string} url 请求地址
 * @param {object} params 地址参数
 */
export const downloadPost = async function (url, data = {}, params={}) {
    return await axios.post(url,data, {
        ...params,
        responseType: 'blob',
        headers: {
            'X-AUTH-TOKEN' : getToken(),
        },
    }).then(res => {
        return new Promise((resolve,reject)=>{
            let fileReader = new FileReader();
            fileReader.onload = function () {
                try {
                    let response = JSON.parse(this.result); // 说明是普通对象数据,后台转换失败
                    if(typeof response == 'object') {
                        if (response.code) {
                            Notification.warning({
                                title: '提示',
                                message: `${response.msg}`,
                            })
                            return reject(response)
                        }
                    }else{
                        throw('message');
                    }
                } catch (error) {
                    const name = window.decodeURI(res.headers['content-disposition'].split('=')[1]);
                    if (window.navigator.msSaveBlob) {
                        const blobObject = new Blob([res.data]);
                        window.navigator.msSaveBlob(blobObject, name);
                    } else {
                        let link = document.createElement('a');
                        link.href = window.URL.createObjectURL(res.data);
                        link.download = name;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                    return resolve(res.data)
                }
            };
            fileReader.readAsText(res.data)
        })
    }).then(res=>{
        return res
    }).catch(err=>{
        return Promise.reject(err);
    });
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、初识jQuery.js jQuery.js是一款优秀的JS类库,其本质就是在一个立即执行的匿名函数中的闭包,j...
    刘远舟阅读 3,885评论 1 0
  • 1、离职多久了 2、大约多久到岗 3、离这里多远 4、会考虑搬家吗 5、公司会加班 6、为什么要离职 7、你们这个...
    临渊鲸落阅读 5,019评论 0 1
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,936评论 0 106
  • JavaScript 来了 1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业。在今年RedMo...
    abel_cao阅读 6,130评论 2 54
  • 前端面试问题集锦 JavaScript 部分 1、JQuery $(document).ready() 和 win...
    涯无凌阅读 4,427评论 0 2