axios 的get和post请求

（一） 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);
    });