axios传递参数到springboot后台服务

axios传递参数后台使用springboot接收

对于刚学习axios的朋友，可能对于axios传递参数不太熟悉，第一种，使用json提交数据

//1.参数类型是对象axios默认用json提交数据
let params={
	name:'张三',
	age:123
}
axios.post("/pp/station/fn/finish",params)

controller使用@RequestBody接收参数

//@RequestBody解析json参数
 public Respond finish(@RequestBody User vo) {
 }

若使用表单数据提交后台直接使用正常参数接收，axios使用qs组件进行序列化参数即可接收

//需安装导入qs组件
let params={
	name:'张三',
	age:123
}
axios.get('/pp/sn/list', {
      params,paramsSerializer: params => {
        return qs.stringify(params)
      }
    })

private Respond finish(User vo) {
}

上面就是axios提交参数常用的两种方式，有时候发现即使按照这个两种方式，依然不能将数据提交到后台就有可能是axios的拦截器将参数统一处理成表单格式

const sysAxios = axios.create({
	baseURL: '/pcp',
	// 超时
	timeout: 10000
})
// 添加请求拦截器
sysAxios .interceptors.request.use(function(config) {
	//序列化参数，axios将默认使用表单提交，后台controller将无法使用@RequestBody 接收参数
	//若后台必须要使用json接收，本次的请求则不能使用qs序列化
	config.data = qs.stringify(config.data);//序列化参数,
	return config;
}, function(error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

axios对于restful风格提供了get、post、put、delete请求进行了封装，但是调用方法时传递的参数却有点不一样

//post与post提交参数的方式是一样的
axios.put('/pp/order/flow/start', params)
axios.put('/pp/order/flow/start', params)
//get与delete提交的方式是相同的，但是与post、put不相同
axios.get('/pp/order/flow/start', { params })
axios.delete('/pp/order/flow/start', { params })

post、put请求的第二个参数作为整个请求的参数放在axios请求中；get、delete第二个参数中params 属性的值作为请求的参数携带在axios请求中，这就是两则的区别，从源码中则可以体现出来

//变量这四种请求方式，第二个参数为config，此请求开始时，并未设置请求参数
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url
    }));
  };
});
//遍历三种请求方式、、第二个参数为data，将data的值设置为参数
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

有的小伙伴可能好奇，axios请求的参数类型怎么设置的，要知道这个问题，就得翻阅axios源码

//defaults.js文件中有一个默认属性
 transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, 'Accept');
    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;
    }
    //如果url中携带参数，则使用表单提交方式
    if (utils.isURLSearchParams(data)) {
      setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
      return data.toString();
    }
    //若data是一个对象，则使用json的方式提交数据
    if (utils.isObject(data)) {
      setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
      return JSON.stringify(data);
    }
    return data;
  }],

通过xios的源码可以了解到axios在请求过程中设置的默认配置，了解一下这些配置、对于刚学习使用axios的小伙伴可以少踩一些坑；网上很多帖子只说了axios与ajax不一样、但是具体怎么不一样没有具体解释清楚，虽然底层都是XmlHttpRequest，但是aixos做了很多的优化，它整个设计是非常巧妙的。