axios前后端联调的各种格式

• 首先的首先，为了方便处理，需要传递的参数parms类型一般都写成键值对的形式。 然后根据要求的不同再对这个数据进行处理：

  	let params = {
        name: 'hehe',
        age:'111
      }
  

• 然后区分发送的数据类型是application/json; charset=utf-8还是application/x-www-form-urlencoded。其中axios默认的类型是application/json，后端接收的数据格式是键值对字典序列。

  • 其中qs.stringify通常用于form表单类型，传递&连接起来的字符串。

     qs.stringify(params)
    // 'name=hehe&age=10'
    JSON.stringify(params)
    // '{"name":"hehe","age":10}'
    

    这种写法等同于，也就是对params直接进行处理：

    const params = new FormData();
    params.append('name', 'hehe');
    params.append('age', 10);
    

  • json.stringify在前后端联调中不怎么用，将本来的键值对全部转换成字符串，解析的时候可以从一个字符串中解析出一个对象。

• 接下来主要区分的是，参数是不是在url里面。 参数如果在url里面，要对parms进行处理，提取value到url中，并且传递空值。

  • get 并且参数直接附在url后面/test/{id}，此时可以看到是没有向axios中传递参数的，而是对之前的params进行处理，直接用url完成传递。

    export const getRouterAction = <T = any> (url: string, parameter: any):
    	Promise<BaseResponse<T>> => { 		   
    	  let router = ''
    	  for (const keyName in parameter) {
    	    router = router + '/' + parameter[keyName]
    	  }
    	  return axios({
    	    url: url + router,
    	    method: 'get'
    	  }) as any
    }
    

  • 接口的直接'/test'或者'/test?class_id=1'，说明参数直接以字符串拼接的方式展示在地址栏。

    export const getAction = <T = any> (url: string, parameter: any = {}, headers?: any): Promise<BaseResponse<T>> => {
      return axios({
        url: url,
        method: 'get',
        params: parameter,
        headers: headers || {}
      }) as any
    }
    

  • post因为参数不会直接在地址栏显示，所以不需要额外的处理。如果是/test/{id}的方式，那么直接在url中加上id，参数直接不填写即可，也就是postAction('test' + '/' + id).then((res) => {...}

    export const postAction = <T = any> (url: string, parameter: any = {}, config: any = {}): Promise<BaseResponse<T>> => {
      return axios({
        url,
        method: 'post',
        data: parameter,
        ...config
      }) as any
    }
    

注意：这里因为是ts，所以要限定好接口的类型，也就是前面要写：
interface BaseResponse {
code: string;
data: T;
msg?: string;
success: boolean;
headers: any;
}