vue中axios的get請求和post請求的傳參方式、攔截器示例代碼
一、GET 和 POST 傳參方式的優(yōu)缺點(diǎn)
1.post更安全（不會作為url的一部分，不會被緩存，保存在服務(wù)器日志，以及瀏覽器瀏覽記錄中）
2.post發(fā)送的數(shù)據(jù)量更大（get有url長度限制）
3.post能發(fā)送更多的數(shù)據(jù)類型（get只能發(fā)送ASCII字符）
4.post比get慢
5.Post是向服務(wù)器提交數(shù)據(jù)的一種請求，get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求。
5.Post是向服務(wù)器提交數(shù)據(jù)的一種請求，get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求。
7.post請求包含更多的請求頭
8.post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn)，然后才真正發(fā)送數(shù)據(jù)
二、GET 和 POST 傳參方式的請求過程
post請求的過程：
1.瀏覽器請求tcp連接（第一次握手）
2.服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）
3.瀏覽器確認(rèn)，并發(fā)送post請求頭（第三次握手，這個報文比較小，所以http會在此時進(jìn) 行第一次數(shù)據(jù)發(fā)送）
4.服務(wù)器返回100 continue響應(yīng)
5.瀏覽器開始發(fā)送數(shù)據(jù)
6.服務(wù)器返回200 ok響應(yīng)
get請求的過程
1.瀏覽器請求tcp連接（第一次握手）
2.服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）
3.瀏覽器確認(rèn)，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手，這個報文比較小，所以http會在此時進(jìn)行第一次數(shù)據(jù)發(fā)送）
4.服務(wù)器返回200 ok響應(yīng)。
三、axios使用
1、axios的安裝
$ npm install axios // 使用npm $ bower install axios // 使用bower <script src="https://unpkg.com/axios/dist/axios.min.js"></script> // 通過cdn直接調(diào)用
2、axios的引入
import axios from 'axios';
3、get
第一種參(參數(shù)在url上)
axios.get('/adate?id=123').then(res => {
console.log(res);
})
第二種傳參(通過param選項(xiàng)傳遞參數(shù))
axios.get('/adate?id=123',{
params: {
id: 1
}
}).then(res => {
console.log(res);
})
4、post
axios.post('/api/axios', {
uname: 'lisi',
pwd: 123
}).then(ret => {
console.log(ret.data)
})
四、攔截器
1、請求攔截器
import axios from 'axios'
const service = axios.create({
baseURL: '基礎(chǔ)路徑',
timeout: 15000
})
//添加請求攔截器 請求接口統(tǒng)一添加token
service.interceptors.request.use(
config =>{
// 成功的回調(diào)
},
error =>{
// 失敗的回調(diào)
}
)
export default service
2、響應(yīng)攔截器
import axios from 'axios'
const service = axios.create({
baseURL: '基礎(chǔ)路徑',
timeout: 15000
})
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
// 成功回調(diào)
},
error => {
// 失敗回調(diào)
}
)
export default service
3、案例
/**
* 請求封裝
*/
import axios from 'axios';
import configUrl from './url.js';
import store from '../store';
const service = axios.create({
baseURL: configUrl.baseURL,
// withCredentials: true, // 當(dāng)跨域請求時發(fā)送cookie
timeout: 15000 // 請求超時
});
//添加請求攔截器 請求接口統(tǒng)一添加token
service.interceptors.request.use(
config =>{
config.headers.token = store.getters.token || ''; //請求添加token
return config;
},
error =>{
return Promise.reject(error);
}
)
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
//如果接口返回token，替換本地舊token
if (response.headers.token) {
sessionStorage.setItem("token", response.headers.token);
}
//自定義設(shè)置后臺返回code對應(yīng)的響應(yīng)方式
if (response.data.code == 203) { // 未登錄或登錄超時
return Promise.reject(new Error('登錄超時'));
} else { //接口正常，返回數(shù)據(jù)
return response;
}
},
error => {
if (error.message) {
// this.$massage.error('服務(wù)器開小差了，請稍后再試!')
//錯誤響應(yīng)
alert('服務(wù)器開小差了，請稍后再試!')
}
return Promise.reject(error);
}
);
//暴露出封裝過的服務(wù)
export default service;
到此這篇關(guān)于vue中axios的get請求和post請求的傳參方式、攔截器的文章就介紹到這了,更多相關(guān)axios get請求和post請求傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+vite項(xiàng)目配置ESlint、pritter插件過程
這篇文章主要介紹了vue3+vite項(xiàng)目配置ESlint、pritter插件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在Vue中，父子組件之間通過Prop和Event實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，但是，Vue設(shè)計者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
vue項(xiàng)目打包清除console.log的四種方法總結(jié)
大家在項(xiàng)目開發(fā)的時候,需要看看一些后端接口返回的結(jié)果,會多次使用console.log項(xiàng)目開發(fā)完成打包的時候,發(fā)現(xiàn)控制臺一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue之bus總線的簡單使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue中使用WebWorker的示例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
VUE是通過傳遞一些配置給Vue對象和頁面中引用插值表達(dá)式來操作DOM的,下面這篇文章主要給大家介紹了關(guān)于Vue3中操作dom的四種方式總結(jié),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3+vite使用svg圖片方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
Vue中組件這個特性讓不少前端er非常喜歡，我自己也是其中之一，它讓前端的組件式開發(fā)更加合理和簡單。下面這篇文章主要給大家介紹了關(guān)于Vue2中組件間通信的解決全方案，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。2017-07-07
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當(dāng)用戶編輯代碼時,實(shí)時預(yù)覽會根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時預(yù)覽,需要的朋友可以參考下2023-10-10