vue axios POST請求後端接收數據異常處理

經過修改content-type，解決vue axios post請求異常。

項目後端管理採用element-ui構建，使用vue axios進行ajax請求。

使用post進行請求時，後端獲取參數失敗。分析請求發現Content-Type:application/json;charset=UTF-8，請求參數以request payload形式提交。以前jquery ajax請求Content-Type:application/x-www-form-urlencoded;charset=UTF-8以form data方式提交，未遇到相似問題。

• AJAXAJAX POST請求中參數以form data和request payload形式在servlet中的獲取方式 POST請求中參數以form data和request payload形式在servlet中的獲取方式 介紹了request payload和form data的區別
• Axios的配置詳細介紹了axios的配置及問題的解決方法

修改後的axios配置

import axios from 'axios'
Vue.http = axios;
//`withCredentials`指示是否跨站點訪問控制請求
Vue.http.defaults.withCredentials = true;
Vue.http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

修改後通用ajax方法

//工具方法文件
import Vue from 'vue';
//qs對post參數進行序列化
import qs from 'qs'

/**
 * 封裝ajax請求，全部ajax都通過這個方法發出
 * 這個方法返回一個Promise對象
 * 
 * @param {String} uri      請求地址
 * @param {Object} params   請求參數對象
 * @param {Object} config   配置對象
 * @returns Promise
 */

export const ajax = (uri,params,config) =>{
    config = config ? config : {};
    var setings = {check:true,method:"get"};
    for(var key in config){
        setings[key] = config[key];
    }
    if(setings.method=="post"){
        params =  qs.stringify(params);
	}
    return new Promise(function(resolve,reject){
        Vue.http[setings.method](uri,params).then(function(json){
            if(typeof json.data == "string"){
                json.data = JSON.parse(json.data);
            }
            if(json.data.status=="0"){
                resolve(json.data);
            }else if(json.data.status=="1"){
                window.location.hash="#/login"
                reject(json.data);       
            }else{
                reject(json.data);
            }
        },function(json){
            json.data = {status:1,message : json.status+' '+json.statusText};
            reject(json);
        })
    });
}