一、post（@RequestBody）

请求对应 contentType: "application/json;charset=UTF-8" --- @RequestBody

Controller中不支持多个@RequestBody

      let config = {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
          }
        }

        axios.post(this.urld, data, config).then(res => {})




//Controller.java
 需要用@requestbody

1、解决方案，用jsonobj 或者 map 或者实体类接收

2、@MultiRequestBody 这个可以多个，原文地址： https://blog.csdn.net/w605283073/article/details/82119284/

@Controller
@RequestMapping("/xhr/test")
public class DemoController {
 
    @RequestMapping("/demo")
    @ResponseBody
     public String multiRequestBodyDemo1(@MultiRequestBody Dog dog, @MultiRequestBody User user) {
        System.out.println(dog.toString()+user.toString());
        return dog.toString()+";"+user.toString();
    }

：

  }

二、直接用get

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });



@RequestMapping(value = "/user")
@Transactional
public R user(@RequestParam Map<String, Object> ){
}

三、post（@RequestParam 或者不加注释）

1、URLSearchParams

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
	method: 'post',
	url: '/api/lockServer/search',
	data: param
})


//ps:URLSearchParams 不支持所有的浏览器，但是总体的支持情况还是 OK 的，所以优先推荐这种简单直接的解决方案

2、qs

import Qs from 'qs'  //引入 qs ，这个库是 axios 里面包含的

let data = {
	    username: 'admin',
		pwd: 'admin'
	}


//第一种
axios({
	headers: {

        'Content-Type': 'application/x-www-form-urlencoded',
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)
})


//第二种
axios({
     url: url,
    method: "post",
    transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      return Qs.stringify(data)
    }],
    headers: {
		//'deviceCode': 'A95ZEF1-47B5-AC90BF3'//可要可不要
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: data,
})

3、类似get

axios.post('/api/lockServer/search',"userName='admin'&pwd='admin'");

四、重写axios 实例

//【重写一个 axios 实例，重新实现属于我们自己的 transformRequest】
import axios from 'axios'
let instance = axios.create({
	transformRequest: [function transformRequest(data, headers) {
	    normalizeHeaderName(headers, 'Content-Type');
	    if (utils.isFormData(data) ||
	      utils.isArrayBuffer(data) ||
	      utils.isBuffer(data) ||
	      utils.isStream(data) ||
	      utils.isFile(data) ||
	      utils.isBlob(data)
	    ) {
	      return data;
	    }
	    if (utils.isArrayBufferView(data)) {
	      return data.buffer;
	    }
	    if (utils.isURLSearchParams(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      return data.toString();
	    }
	    /*改了这里*/
	    if (utils.isObject(data)) {
	      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
	      let _data = Object.keys(data)
	      return encodeURI(_data.map(name => `${name}=${data[name]}`).join('&'));
	    }
	    return data;
	}],
})

vue 封装请求

需要在prod.env.js文件里面配置VUE_APP_PATH

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_PATH : '"自己的请求地址"',
  source_request_PATH:'"自己请求地址"'
}





import axios from 'axios';
import Qs from 'qs'
//创建axios实例
const service = axios.create({
  timeout: 30000 //超时时间
})

//添加request拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
})

//添加response拦截器
service.interceptors.response.use(
  response => {
    let res = {};

    if(response.data.code === 200){
      res.data = response.data.data;
      return res;
    }else{
      res.status =response.data.code;
      res.errMsg = response.data.message;
      return Promise.reject(res);
    }

  },
  error => {
    return Promise.reject(error.response)
  }
)

//封装get接口
// params={} 是设置默认值
export function get(url, params = {}) {
  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
  return service({
    url: url,
    method: 'get',
    headers: {
    },
    params
  })
}

//封装post请求
export function post(url, data = {}) {
  //默认配置
  let sendObject = {
    url: url,
    method: "post",
    transformRequest: [function (data) {
      // 对 data 进行任意转换处理
      return Qs.stringify(data)
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: data,
  };
  return service(sendObject)
}

export function postjson(url, data = {}) {
  //默认配置
  let sendObject = {
    url: url,
    method: "post",
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    },
    data: data
  };
  sendObject.data = JSON.stringify(data);
  return service(sendObject)
}



//处理格式化URL（/demo/{id}）
function render(url, data) {
  var re = /{([^]+)?}/
  var match = ''
  while ((match = re.exec(url))) {
    url = url.replace(match[0], data[match[1]])
  }
  return url
}

const fetch = (options) => {
  //process.env.VUE_APP_PATH为环境变量在.env文件中配置
  let url = process.env.VUE_APP_PATH + options.url;
  url = render(url, options.data)
  switch (options.method.toUpperCase()) {
    case 'GET':
      return get(url, options.data)
    case 'POST':
      return post(url, options.data)
    case 'POSTJSON':
      return postjson(url, options.data)
    default:
      return service(options)
  }
}

/**
 * 提供一个http方法
 * url 访问路径 不包括域名和项目名
 * data 参数对象
 * method 请求方式
 *  */
export function httpRequest(url = '', data = {}, method = "GET") {
  const options = { url: url, data: data, method: method }
  return fetch(options).catch(error => {
    throw error
  })
}

原文链接：https://blog.csdn.net/qq_42344946/article/details/115008006