笔者这两天在写一个前后端分离的项目(Vue.js 作为前端、ThinkPHP 做后端),遇到了使用 Axios 向后端无法传递参数的情况,以下为解决方案,记录以供下次查阅。

原先的代码如下:

import request from '@/plugin/axios'
import qs from 'qs'

export function userSearch (query) {
  return request({
    url: '/user/search',
    method: 'POST',
    params: query
  })
}

因为我们在对接口 POST 提交参数的时候,使用数组类型之前需要进行序列化操作,这个时候我们就可以使用 qs 库的 stringify 方法,进行序列化操作,并且需要提供 options,即为 arrayFormat: 'repeat'

修改后的代码如下:

import request from '@/plugin/axios'
import qs from 'qs'

export function userSearch (query) {
  return request({
    url: '/user/search',
    method: 'POST',
    params: query,
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  })
}

图片参考:

QQ截图20190815165514.png

标签: ThinkPHP, Vue.js, d2-admin, Axios

添加新评论