qs 模块的使用

使用

在某些接口上，必须对数据进行处理后，才能以 {} 对象形式传参：

import request from '@/utils/request'
import qs from 'qs'

export const dataDel = params => {
  return request({
    url: `/xxxx/xxx/xxxxx`,
    method: 'delete',
    params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  })
}

export const sysLibList = data => {
  return request({
    url: '/xxxx/xxx/xxxxx',
    method: 'post',
    headers:{
      "Content-Type" : 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
  })
}

export const sysLibData = data => {
  return request({
    url: '/xxxx/xxx/xxxxx',
    method: 'post',
    headers:{
      "Content-Type" : 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
  })
}

Content-Type 的单独设置

原因：在 request 中默认配置的是： axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'。

因此，传参用 {} 对象格式就没问题，因为： request 请求拦截器 中使用了 JSON.stringify() 将对象转为 JSON 格式。

但如果接口的数据格式不是 application/json，则需要为封装的这个接口单独配置 Content-Type。

接口数据格式

为什么数据格式是 multipart/form-data，但 Content-Type 要设置为 application/x-www-form-urlencoded？

import request from '@/utils/request'
import qs from 'qs'

// 数据格式是 `multipart/form-data`
export const sysLibList = data => {
  return request({
    url: '/xxxx/xxx/xxxxx',
    method: 'post',
    headers:{
      "Content-Type" : 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
  })
}

参考链接：

1. formdata格式传参
   2.Post请求的两种编码格式：application/x-www-form-urlencoded和multipart/form-data
2. application/x-www-form-urlencoded和multipart/form-data的区别

qs 的使用

qs.parse()

qs.stringify()

区别：JSON.parse() 和 JSON.stringify()

参考链接：

1. qs.stringify和JSON.stringify的使用和区别
2. npm qs 模块（中文）