1.Vue + Axios 請求介面方法與傳參詳解 2.拓展在webservice中介面直接返回json格式而非xml格式的響應方法

使用Vue的腳手架搭建的前端專案，通常都使用Axios封裝的介面請求，專案中引入的方式不做多介紹，本文主要介紹介面呼叫與不同形式的傳參方法。

一、Get請求：

Get請求比較簡單，通常就是將引數拼接到url中 用? &連線 或者用下面這種方式：

this.axios.get(this.getWxQyUserInfoUrl, {
params: {
agentid: this.doLoginParams.agentid,
code: this.doLoginParams.code
}
})

二、Post請求：

1）表單資料 FormData傳參方式 ① axios配置，設定請求頭：Header Accept: text/plain, text/html --指定客戶端能夠接收的內容型別 Content-Type：Content-Type: application/x-www-form-urlencoded --請求的與實體對應的MIME資訊 一般設定方式如下: this.axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //配置請求頭 //JSON格式的為：'application/json;charset=UTF-8' 指定客戶端能接受的內容型別 一般在全域性的封裝request中：main.js中

axios.interceptors.request.use(config => {
 
//指定客戶端能夠接收的內容型別
config.headers.Accept = "application/json, text/plain,*/*"
return config;
}, error => Promise.error(error)
)

跟設定單獨的響應異常處理類似：

axios.interceptors.response.use(response => {
// 系統報錯
return response;
}, error => {
// 可根據需要將請求報錯跳轉到網路異常頁面
console.log("主頁面捕獲axios異常："+JSON.stringify(error));
 
// router.push({
// path: "/networkerr",
// name: "networkerr"
// });
})

② 請求介面封裝檔案中，引入qs中介軟體，請求方法為post時，引數需要通過qs.stringify函式進行格式轉換 qs模組是axios中自帶的不需要下載，直接匯入 核心就是把引數轉換成標準的鍵值對 全域性引用方式：main.js中 import qs from 'qs'; Vue.prototype.$qs = qs; 然後在各個頁面就可以直接 this.$qs.stringify(params)使用了 單頁面引用：

var qs = require('
 
qs');
this.axios.post(this.postUrl,qs.stringify({"value1":100,"vaule2":"123"}))
 

2）JSON字串傳參方式 ① axios配置，設定請求頭：Head this.axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; //配置請求頭 ② 請求引數使用SON.stringify()函式轉換，也可以不轉換直接傳引數 this.axios.post(this.imageSaveUrl, JSON.stringify(params)) 三、拓展補充 最後附上設定webservice介面直接返回json格式而不是xml格式的響應： 改變資料的返回方式，用 Context.Response.Write代替return 語句，可返回Json格式資料，如下： Context.Response.Charset = "utf-8"; //設定字符集型別 或者GB2312 Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //或者System.Text.Encoding.GetEncoding("GB2312"); Context.Response.Write(jaoData); Context.Response.End();