Vue使用Axios請求攔截器的案例詳解
Vue中Axios攔截器
在Vue項目中，Axios是一個非常流行的HTTP客戶端，用于發(fā)送請求和接收響應(yīng)。Axios攔截器是Axios的一個強(qiáng)大功能，它允許你在請求發(fā)送之前和響應(yīng)返回之后對請求和響應(yīng)進(jìn)行處理和攔截。通過攔截器，你可以添加請求頭、處理請求參數(shù)、處理錯誤等。本文將結(jié)合實際案例，詳細(xì)介紹如何在Vue中使用Axios攔截器。
一、安裝Axios
首先，你需要在Vue3項目中安裝Axios。你可以使用npm或yarn等包管理工具進(jìn)行安裝。
npm install axios
或者
yarn add axios
二、創(chuàng)建Axios實例
在Vue3項目中，通常會在項目的某個地方創(chuàng)建一個Axios實例，并對其進(jìn)行配置。你可以將Axios實例放在一個單獨的文件中，例如src/axios.js。
// src/axios.js
import axios from 'axios';
// 創(chuàng)建Axios實例
const axiosInstance = axios.create({
baseURL: '// 你的基礎(chǔ)URL', // 設(shè)置請求的baseURL
timeout: 5000, // 設(shè)置請求超時時間
});
// 導(dǎo)出Axios實例
export default axiosInstance;
在上面的代碼中，我們使用axios.create方法創(chuàng)建了一個Axios實例，并傳遞了一些配置選項，例如baseURL和timeout。
三、設(shè)置請求攔截器
請求攔截器允許你在請求發(fā)送之前對請求進(jìn)行處理。你可以在Axios實例中使用interceptors.request.use方法來添加請求攔截器。
// src/axios.js
import axios from 'axios';
// 創(chuàng)建Axios實例
const axiosInstance = axios.create({
baseURL: '// 你的基礎(chǔ)URL',
timeout: 5000,
});
// 添加請求攔截器
axiosInstance.interceptors.request.use(
(config) => {
// 在發(fā)送請求之前做些什么
// 例如，添加請求頭
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 處理請求參數(shù)
// config.params = {
// ...config.params,
// key: 'value',
// };
return config;
},
(error) => {
// 對請求錯誤做些什么
return Promise.reject(error);
}
);
// 導(dǎo)出Axios實例
export default axiosInstance;
在上面的代碼中，我們添加了一個請求攔截器。在攔截器中，我們檢查本地存儲中是否存在token，如果存在，則將其添加到請求頭中。你還可以對請求參數(shù)進(jìn)行處理，例如添加或修改參數(shù)。
四、設(shè)置響應(yīng)攔截器
響應(yīng)攔截器允許你在響應(yīng)返回之后對響應(yīng)進(jìn)行處理。你可以在Axios實例中使用interceptors.response.use方法來添加響應(yīng)攔截器。
// src/axios.js
import axios from 'axios';
// 創(chuàng)建Axios實例
const axiosInstance = axios.create({
baseURL: '// 你的基礎(chǔ)URL',
timeout: 5000,
});
// 添加請求攔截器（同上）
// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(
(response) => {
// 對響應(yīng)數(shù)據(jù)做些什么
// 例如，處理響應(yīng)數(shù)據(jù)格式
// response.data = {
// ...response.data,
// key: 'value',
// };
return response;
},
(error) => {
// 對響應(yīng)錯誤做些什么
const { response } = error;
if (response) {
// 判斷錯誤狀態(tài)碼
if (response.status === 400) {
// 請求錯誤
} else if (response.status === 401) {
// 未授權(quán)，請重新登錄
} else if (response.status === 403) {
// 拒絕訪問（403）
}
return Promise.reject(response.data);
} else {
console.error('網(wǎng)絡(luò)連接異常，請稍后再試！');
}
}
);
// 導(dǎo)出Axios實例
export default axiosInstance;
在上面的代碼中，我們添加了一個響應(yīng)攔截器。在攔截器中，我們可以對響應(yīng)數(shù)據(jù)進(jìn)行處理，例如修改數(shù)據(jù)格式。我們還可以根據(jù)響應(yīng)的狀態(tài)碼來處理不同的錯誤情況。
五、在Vue組件中使用Axios實例
現(xiàn)在，我們已經(jīng)在項目中創(chuàng)建了Axios實例，并添加了請求和響應(yīng)攔截器。接下來，我們可以在Vue組件中使用這個Axios實例來發(fā)送請求。
<!-- src/components/YourComponent.vue -->
<template>
<div>數(shù)據(jù)展示</div>
</template>
<script>
import axiosInstance from '../axios';
export default {
name: 'YourComponent',
mounted() {
axiosInstance.get('/your-endpoint')
.then(data => {
console.log(data);
})
.catch(error => {
console.error('錯誤:', error);
});
},
};
</script>
在上面的代碼中，我們在Vue組件的mounted生命周期鉤子中使用了Axios實例來發(fā)送一個GET請求。請求成功后，我們將響應(yīng)數(shù)據(jù)打印到控制臺。如果請求失敗，我們將錯誤信息打印到控制臺。
六、封裝請求方法
為了更方便地在項目中發(fā)送請求，我們可以將常用的請求方法封裝起來。例如，我們可以封裝GET和POST請求方法。
// src/api/axios.js
import axios from 'axios';
// 創(chuàng)建Axios實例（同上）
// 封裝GET請求方法
export function getRequest(url, params = {}) {
return axiosInstance.get(url, { params });
}
// 封裝POST請求方法
export function postRequest(url, data = {}) {
return axiosInstance.post(url, data);
}
現(xiàn)在，我們可以在Vue組件中使用封裝好的請求方法來發(fā)送請求。
<!-- src/components/YourComponent.vue -->
<template>
<div>數(shù)據(jù)展示</div>
</template>
<script>
import { getRequest, postRequest } from '../api/axios';
export default {
name: 'YourComponent',
mounted() {
// 使用GET請求方法
getRequest('/your-get-endpoint', { param1: 'value1' })
.then(data => {
console.log('GET請求響應(yīng):', data);
})
.catch(error => {
console.error('GET請求錯誤:', error);
});
// 使用POST請求方法
postRequest('/your-post-endpoint', { key: 'value' })
.then(data => {
console.log('POST請求響應(yīng):', data);
})
.catch(error => {
console.error('POST請求錯誤:', error);
});
},
};
</script>
七、統(tǒng)一管理API接口
在項目中，我們可能會有很多API接口。為了方便管理和維護(hù)，我們可以將這些接口統(tǒng)一管理起來。例如，我們可以在src/api目錄下創(chuàng)建一個api.js文件，并在其中定義所有的API接口。
// src/api/api.js
import { getRequest, postRequest } from './axios';
// 定義用戶相關(guān)API接口
export class UserApi {
static async login(params) {
return postRequest('/login', params);
}
static async register(params) {
return postRequest('/register', params);
}
static async getUserInfo(params) {
return getRequest('/userInfo', params);
}
}
// 定義書籍相關(guān)API接口
export class BookApi {
static async getBookList(params) {
return getRequest('/bookList', params);
}
}
現(xiàn)在，我們可以在Vue組件中使用統(tǒng)一管理好的API接口來發(fā)送請求。
<!-- src/components/YourComponent.vue -->
<template>
<div>
<button @click="handleLogin">登錄</button>
</div>
</template>
<script>
import { UserApi } from '../api/api';
export default {
name: 'YourComponent',
methods: {
async handleLogin() {
const params = {
username: 'admin',
password: '123456',
};
try {
const response = await UserApi.login(params);
console.log('登錄成功:', response);
} catch (error) {
console.error('登錄失敗:', error);
}
},
},
};
</script>
拓展：Vue配置axios響應(yīng)攔截器
一個項目會發(fā)送很多請求到后端,每個請求都有如下的響應(yīng)
不想每個請求都去判斷里面的status,那么可以使用axios的響應(yīng)攔截器,對服務(wù)端返回的一些相同點做統(tǒng)一的處理
比如說如果有報錯,就統(tǒng)一彈出這么個錯誤信息
在src目錄下新建utils目錄里新建api.js(名字隨你自己)
原先彈出錯誤信息,可以直接只用
this.$message.error('請輸入正確格式')
但是現(xiàn)在是在js文件里,需要額外單獨引入
配置axios響應(yīng)攔截器(其實也可以配置請求攔截器,就是在所有請求里添加什么什么什么,比如說統(tǒng)一添加請求頭)
這里先介紹響應(yīng)攔截器
import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'//導(dǎo)入文件夾,自動會去找里面的index.js
const instances = axios.create({
baseURL: 'http://localhost',
});
//響應(yīng)攔截器
instances.interceptors.response.use(success=>{//這個success指的是調(diào)用接口成功
console.log('響應(yīng)攔截器,chenggong')
},error=>{//接口根本沒有調(diào)用到或者服務(wù)器掛了,各種原因
console.log('響應(yīng)攔截器,shibai',error)
Message.error({message:error})
});
// //可以在所有請求前添加前置路徑
// let base='';
// //封裝請求并導(dǎo)出
// export const postRequest=(url,params)=>{
// return axios({
// method:'post',
// url:'${base}${url}',
// data:params
// })
// }
export default instances;記得在main.js引入
引入的即為utils.api.js里
導(dǎo)出的
下面第一張圖用的是反引號,注意
到此這篇關(guān)于Vue使用Axios請求攔截器的案例詳解的文章就介紹到這了,更多相關(guān)Vue Axios請求攔截器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue之beforeEach非登錄不能訪問的實現(xiàn)（代碼親測）
這篇文章主要介紹了Vue之beforeEach非登錄不能訪問的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue3+WebSocket實現(xiàn)實時文件傳輸監(jiān)控系統(tǒng)
WebSocket是一種在客戶端和服務(wù)器之間進(jìn)行雙向通信的網(wǎng)絡(luò)協(xié)議,它通過建立持久性的、全雙工的連接,允許服務(wù)器主動向客戶端發(fā)送數(shù)據(jù),本文小編給大家介紹了基于Vue3+WebSocket實現(xiàn)實時文件傳輸監(jiān)控系統(tǒng),需要的朋友可以參考下2025-03-03
Vue3中watch和watchEffect的區(qū)別及使用技巧總結(jié)
在Vue.js里,watch和watchEffect都用于響應(yīng)式地追蹤數(shù)據(jù)變化并執(zhí)行相應(yīng)操作,不過它們在使用方式、應(yīng)用場景等方面存在差異,這篇文章主要介紹了Vue3中watch和watchEffect區(qū)別及使用技巧的相關(guān)資料,需要的朋友可以參考下2026-02-02
面包屑功能是我們在項目中經(jīng)常遇到的功能，今天小編使用Element-UI 進(jìn)行實現(xiàn)在vue項目中實現(xiàn)面包屑功能，具體實現(xiàn)方式大家跟隨小編一起學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
unplugin-vue-components解決命名沖突問題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue子父組件通信的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進(jìn)行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進(jìn)行tween特效,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue.js實現(xiàn)的計算器功能,結(jié)合完整實例形式分析了vue.js響應(yīng)鼠標(biāo)事件實現(xiàn)基本的數(shù)值運算相關(guān)操作技巧,可實現(xiàn)四則運算及乘方、開方等功能,需要的朋友可以參考下2018-07-07