axios 之传递数组参数探究 -- qs库

蔚落 2023-10-02 16:57 1阅读 0赞

承接上文 [axios.js 之传递数组参数 探究][axios.js _]，继续探究

后端的数组传参可搞出一系列操作，详见：[SpringMVC 数组类型参数定义以及前端如何传参][SpringMVC]  
文中给出了各种数据参数的url传参示例，那我们的目的就是要知道，如何通过axios构造出这种形式的url。在之前我们已经知道，问题的关键在于 axios 的序列化配置，而 `axios` 使用的序列化库为 `qs`，所以，问题的本质是**探究 `qs` 的各种序列化配置**！

`qs库` 的文档：[https://www.npmjs.com/package/qs][https_www.npmjs.com_package_qs]  
其提供了在线测试工具：[https://npm.runkit.com/qs][https_npm.runkit.com_qs]  
既然有在线测试工具，那直接将所有配置挨个测试一下，查看其效果就可以知道使用什么配置即可对应上后端的参数。（没错，就是这么简单粗暴）  
**测试的思路就是，先编写符合后端格式的json数据，通过调用 `qs库` 序列化该json，若序列化后的字符串对应上后端的预期格式，即匹配。**  
测试例子如下：

var qs = require("qs")
    
    // === 普通类型数组 ==
    params = {
        
      ids: [1, 2]
    }
    str = qs.stringify(params, {
        arrayFormat: 'brackets'})
    console.log('brackets', decodeURI(str))
    // ids[]=1&ids[]=2
    
    str = qs.stringify(params, {
        arrayFormat: 'indices'})
    console.log('indices', decodeURI(str))
    // ids[0]=1&ids[1]=2
    
    str = qs.stringify(params, {
        arrayFormat: 'repeat'})
    console.log('repeat', decodeURI(str))
    // ids=1&ids=2
    
    str = qs.stringify(params, {
        arrayFormat: 'comma'})
    console.log('comma', decodeURI(str))
    // ids=1%2C2
    
    
    // === 对象类型数组 ===
    params = {
        
        beans: [
    	    {
        
    	        id: 1,
    	        name: 1
    	    },
    	    {
        
    	        id: 2,
    	        name: 2
    	    }
        ]
    }
    str = qs.stringify(params, {
        arrayFormat: 'brackets'})
    console.log('brackets', decodeURI(str))
    // beans[][id]=1&beans[][name]=1&beans[][id]=2&beans[][name]=2
    
    str = qs.stringify(params, {
        arrayFormat: 'indices'})
    console.log('indices', decodeURI(str))
    // beans[0][id]=1&beans[0][name]=1&beans[1][id]=2&beans[1][name]=2
    
    str = qs.stringify(params, {
        arrayFormat: 'repeat'})
    console.log('indices', decodeURI(str))
    // beans[id]=1&beans[name]=1&beans[id]=2&beans[name]=2
    
    str = qs.stringify(params, {
        arrayFormat: 'comma'})
    console.log('comma', decodeURI(str))
    // beans=[object Object]%2C[object Object]

**接下来就是看图说话了，根据你要实现的效果，进行相应的配置。**

额，得搞几个例子，详见 [axios 传递数组参数示例][axios]

--------------------

end

[axios.js _]: https://markix.blog.csdn.net/article/details/107702531
[SpringMVC]: https://markix.blog.csdn.net/article/details/121580411
[https_www.npmjs.com_package_qs]: https://www.npmjs.com/package/qs
[https_npm.runkit.com_qs]: https://npm.runkit.com/qs
[axios]: https://markix.blog.csdn.net/article/details/121584965