Vue+Axios請求接口方法與傳參方式是什么

這篇文章主要講解了“Vue+Axios請求接口方法與傳參方式是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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();

感謝各位的閱讀，以上就是“Vue+Axios請求接口方法與傳參方式是什么”的內容了，經過本文的學習后，相信大家對Vue+Axios請求接口方法與傳參方式是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！