使用axios对参数处理，qs.stringify和new URLSearchParams区别

最新推荐文章于 2024-03-07 20:33:05 发布

lj_qmzhnT_T

最新推荐文章于 2024-03-07 20:33:05 发布

阅读量891

点赞数 2

分类专栏： javascript vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lj_qmzhnT_T/article/details/125663817

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

7 篇文章 1 订阅

订阅专栏

一：post，分别对参数不处理，用qs.stringify和new URLSearchParam区别

1.不处理，json传值，对undefined会自动过滤

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'post',
      // data: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined })
      // data: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined })
      data: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },

2. qs.stringify，变成表单传值，对undefined，空数组会自动过滤，null值为空，数组会遍历

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'post',
      data: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // data: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // data: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },

3. new URLSearchParam，变成表单传值，对undefined不会过滤，对数组也会处理

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'post',
      // data: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      data: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // data: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },

二：get，分别对参数不处理，用qs.stringify和new URLSearchParam区别

1.不处理

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'get',
      // params: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // params: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      params: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },

2.qs.stringify

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'get',
      params: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // params: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // params: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },

3.new URLSearchParam

listPage: (parameter) => {
    return axios({
      url: Url.listPage,
      method: 'get',
      // params: qs.stringify({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      params: new URLSearchParams({ ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] })
      // params: { ...parameter, pageNum: parameter.pageNo, aaa: null, bbb: undefined, ccc: [], ddd: [1,2,3] },
    }).then(res => ({
      data: res.result.list, ...res.result.page
    }))
  },