下载功能实现:get请求为数组

前序

问题：
1、get请求中参数为数组：根据后端的要求转化为一定的格式
2、下载的文件名称在相应头中：需要后端更改后前端在请求头中获取

1. 数组需转换

格式要求：数组 a=[“b”,“c”] 要求格式为a=b&a=c

//安装qs
npm inistall qs --save
//引入qs(我是在请求拦截配置中更改的)
important qs from 'qs'
/**
 * 请求拦截器(拦截get处理后可直接传递数组参数)
 */
instance.interceptors.request.use(
    config => {
        if (config.method === 'get') {
            config.paramsSerializer = function(params) {
            return qs.stringify(params, { arrayFormat: 'repeat' })
            }
        }
        return config;
    }
);

• 知识拓展

qs转换数组如下：

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })//// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })// 输出结果：'a=b,c'

2. 获取请求头中的参数

处理方法：需要后端处理请求头参数

//自定义响应头
ctx.res.setHeader('myheader','abc')
//通过header设置允许前端访问
ctx.res.setHeader('Access-Control-Expose-Headers', 'myheader')

                    getExportUserAction({
                        ...this.formValidate,//这是参数集合
                    }).then(res => {
                        if (!res.data) {
                            return
                        } else {
                            let url = window.URL.createObjectURL(res.data);
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link.href = url;
                            let fileName = res.headers["myheader"];//获取请求头
                            link.setAttribute('download', fileName);
                            document.body.appendChild(link);
                            link.click()
                            document.body.removeChild(link);
                            window.URL.revokeObjectURL(link.href);
                        }
                    })

参考

• 数组处理:qs处理参考资料