（一） POST 请求
request中发送json数据用post方式发送Content-type用application/json;charset=utf-8方式发送的话，直接用springMVC的@RequestBody标签接收后面跟实体对象就行了，spring会帮你自动拼装成对象，如果Content-type设置成application/x-www-form-urlencoded;charset=utf-8就不能用spring的东西了，只能以常规的方式获取json串了
后端获取数据的方式有两种，一种是@RequestParam（通过字符串中解析出参数）,另一种是@ResponseBody（从请求体中取参数）；
在axios使用Post发送数据时，单纯用官方文档的写法后台是无法接收导数据的，因为大多数后台解析前台发过去的数据是用第二种方法，而默认是直接把json放到请求体中提交到后端的。
解决办法是：
import axios from "axios";
import qs from 'qs';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
export function Post(url, data) {
let params = qs.stringify(data);
return new Promise((resolve, reject) => {
axios.post(url, params).then((response) => {
resolve(response.data)
}, err => {
reject(err);
})
})
}
//注意这种情况下,如果data数据里有数组类型数据，得提前进行转化用data.arr = JSON.stringify（dada.arr）;
//若不对数组做处理后台是无法接受到数组类型数据。
为了方便数组转换我该写了对post请求的封装
export function Post(url, data) {
/*
* 采用递归算法将参数中的 Array型 数据进行转化
*/
function searchArray(data){
Object.keys(data).forEach((key) => {
if ((typeof data[key]) === 'array') {
data[key] = JSON.stringify(data[key]) // 这里必须使用内置JSON对象转换
}else if ((typeof data[key]) === 'object'){
searchArray(data[key])
}
})
}
searchArray(data); //递归转化Array
let params = qs.stringify(data); //用qs模块转化参数
return new Promise((resolve, reject) => {
axios.post(url, params).then((response) => {
resolve(response.data)
}, err => {
reject(err);
})
})
}
qs是qs模块需要通过npm安装，最早是由TJ大神编写的。它是A querystring parser with nesting support，即一个支持嵌套的查询字符串解析器
1.qs.parse()将URL解析成对象的形式
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
qs.parse(url);//
{method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0"}
2.qs.stringify( )将对象解析成URL的形式
let obj= {method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0", datasetId: " 12564701"};
qs.stringify( obj)//
{method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0", datasetId: " 12564701"}
（二）GET请求
按照官网例子正常书写就好，不过我在我的项目中也对它进行了封装
export function Get(url, data) {
return new Promise((resolve, reject) => {
axios.get(url, {params:data})
.then(response => {
console.log(response)
resolve(response.data);
}, err => {
reject(err);
})
})
}
（三）axios请求超时的解决方法
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// If config does not exist or the retry option is not set, reject
if(!config || !config.retry) return Promise.reject(err);
// Set the variable for keeping track of the retry count
config.__retryCount = config.__retryCount || 0;
// Check if we've maxed out the total number of retries
if(config.__retryCount >= config.retry) {
// Reject with the error
return Promise.reject(err);
}
// Increase the retry count
config.__retryCount += 1;
// Create new promise to handle exponential backoff
var backoff = new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, config.retryDelay || 1);
});
// Return the promise in which recalls axios to retry the request
return backoff.then(function() {
return axios(config);
});
});
To use:
axios.get('/some/endpoint', { retry: 5, retryDelay: 1000 })
.then(function(res) {
console.log('success', res.data);
})
.catch(function(err) {
console.log('failed', err);
});
