快捷導(dǎo)航

Vue?+?Axios?請(qǐng)求接口方法與傳參方式詳解

更新時(shí)間：2021年12月25日 11:46:07 作者：流浪阿丁

使用Vue的腳手架搭建的前端項(xiàng)目，通常都使用Axios封裝的接口請(qǐng)求，項(xiàng)目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對(duì)Vue?+?Axios?請(qǐng)求接口方法與傳參問題感興趣的朋友一起看看吧

一、Get請(qǐng)求：

Get請(qǐng)求比較簡(jiǎn)單，通常就是將參數(shù)拼接到url中用? &連接或者用下面這種方式：

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

二、Post請(qǐng)求：

1）表單數(shù)據(jù) FormData傳參方式
① axios配置，設(shè)置請(qǐng)求頭：Header
Accept: text/plain, text/html --指定客戶端能夠接收的內(nèi)容類型
Content-Type：Content-Type: application/x-www-form-urlencoded --請(qǐng)求的與實(shí)體對(duì)應(yīng)的MIME信息
一般設(shè)置方式如下:
this.axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //配置請(qǐng)求頭 //JSON格式的為：'application/json;charset=UTF-8'
指定客戶端能接受的內(nèi)容類型一般在全局的封裝request中：main.js中

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

跟設(shè)置單獨(dú)的響應(yīng)異常處理類似：

axios.interceptors.response.use(response => {
// 系統(tǒng)報(bào)錯(cuò)
return response;
}, error => {
// 可根據(jù)需要將請(qǐng)求報(bào)錯(cuò)跳轉(zhuǎn)到網(wǎng)絡(luò)異常頁(yè)面
console.log("主頁(yè)面捕獲axios異常："+JSON.stringify(error));
// router.push({
// path: "/networkerr",
// name: "networkerr"
// });
})

② 請(qǐng)求接口封裝文件中，引入qs中間件，請(qǐng)求方法為post時(shí)，參數(shù)需要通過qs.stringify函數(shù)進(jìn)行格式轉(zhuǎn)換
qs模塊是axios中自帶的不需要下載，直接導(dǎo)入核心就是把參數(shù)轉(zhuǎn)換成標(biāo)準(zhǔn)的鍵值對(duì)
全局引用方式：main.js中

 import qs from 'qs';
 Vue.prototype.$qs = qs;

然后在各個(gè)頁(yè)面就可以直接 this.$qs.stringify(params)使用了
單頁(yè)面引用：

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

2）JSON字符串傳參方式
① axios配置，設(shè)置請(qǐng)求頭：Head

this.axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; //配置請(qǐng)求頭

② 請(qǐng)求參數(shù)使用SON.stringify()函數(shù)轉(zhuǎn)換，也可以不轉(zhuǎn)換直接傳參數(shù)

this.axios.post(this.imageSaveUrl, JSON.stringify(params))

三、拓展補(bǔ)充

最后附上設(shè)置webservice接口直接返回json格式而不是xml格式的響應(yīng)：
改變數(shù)據(jù)的返回方式，用 Context.Response.Write代替return 語句，可返回Json格式數(shù)據(jù)，如下：

Context.Response.Charset = "utf-8"; //設(shè)置字符集類型 或者GB2312
Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //或者System.Text.Encoding.GetEncoding("GB2312");
Context.Response.Write(jaoData);
Context.Response.End();

到此這篇關(guān)于Vue + Axios 請(qǐng)求接口方法與傳參詳解的文章就介紹到這了,更多相關(guān)Vue Axios 請(qǐng)求接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: