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

本文介绍了如何在前端使用QS库将数组参数按后端要求转换为特定格式,如`a=b&a=c`,并展示了QS库不同数组格式的转换方法。同时,讲解了如何通过后端设置响应头,使前端能够获取到下载文件的名称,并实现文件的自动下载。重点涉及HTTP请求头的配置和响应头的暴露。

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

前序

问题:
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'
  1. 获取请求头中的参数

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

//自定义响应头
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);
                        }
                    })

参考

### 如何在GET请求中传递参数 GET 请求是一种常见的 HTTP 方法,用于向服务器获取资源。通过 URL 查询字符串的形式可以将参数附加到请求地址中[^1]。以下是几种常见的方式以及实现方法: #### 使用查询字符串传递简单参数 最基础的方法是在 URL 中直接附加键值对作为查询字符串的一部分。例如: ```javascript const url = `/riskmanagement/detail?id=${encodeURIComponent(id)}`; ``` 这种方式适用于简单的单个或少量参数的场景。 #### 复杂数据结构(如数组)的传递 当需要传递复杂的数据结构(如数组),可以通过以下方式进行处理: ##### 方式一:逗号分隔法 将数组中的多个值用逗号连接成一个字符串发送给服务端,由服务端解析并还原为数组对象[^2]。 ```javascript // 前端代码示例 let ids = [1, 2, 3]; let queryString = `ids=${ids.join(',')}`; fetch(`/api/endpoint?${queryString}`); ``` ##### 方式二:重复键名法 另一种方式是让每个数组项对应相同的键名称,并将其多次添加至查询字符串中[^3]。 ```javascript import qs from 'qs'; let params = { cartItemIds: [101, 102, 103], }; let serializedParams = qs.stringify(params, { arrayFormat: 'repeat' }); console.log(serializedParams); // 输出结果类似于 "cartItemIds=101&cartItemIds=102&cartItemIds=103" ``` #### 编码特殊字符 无论采用哪种形式,都需要注意对可能存在的特殊字符进行编码操作,防止破坏 URL 的合法性[^4]。 ```javascript function buildQueryString(paramObj){ let parts = []; for(let key in paramObj){ if(Array.isArray(paramObj[key])){ paramObj[key].forEach(value => { parts.push(`${key}=${encodeURIComponent(value)}`); }); } else{ parts.push(`${key}=${encodeURIComponent(paramObj[key])}`); } } return parts.join('&'); } ``` #### 实际应用案例分析 假设有一个需求是从远程接口拉取特定条件下的记录列表,则可以根据实际情况构建相应的 GET 请求链接[^5]: ```javascript async function fetchRecords(filterCriteria){ const baseUrl = "/api/get_records"; // 构建过滤条件部分 let filterStringParts = Object.keys(filterCriteria).map(key=>{ return `${key}=${encodeURIComponent(filterCriteria[key])}`; }); let fullUrl = `${baseUrl}?${filterStringParts.join('&')}`; try{ let response = await fetch(fullUrl,{ method:"GET", headers:{ "Content-Type":"application/json;charset=UTF-8" } }); if(!response.ok){ throw new Error(`HTTP error! status:${response.status}`); } return await response.json(); }catch(error){ console.error("Error fetching records:",error.message); } } // 调用样例 let filters = {"status":"active","type":["email","sms"]}; fetchRecords(filters).then(data=>{console.log(data)}).catch(err=>alert(err)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值