溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關Vue實現封裝Axios請求和攔截器的方法，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
axios 是一個基于 promise 的 http 庫，可以用在瀏覽器和 node.js 中, 也是vue官方推薦使用的http庫。
axios很好用，其中之一就是它的攔截器十分強大，我們可以為請求和響應設置攔截器，比如請求攔截器可以在每個請求里加上token，做了統一處理后維護起來也方便，響應攔截器可以在接收到響應后先做一層操作，如根據狀態碼判斷登錄狀態、授權。
之前初學的時候，經常將axios數據請求寫在各組件方法內，但實踐證明，如果項目接口變動要修改url地址等參數會比較為麻煩，不易維護，于是需要對axios進行封裝并將接口統一管理。
當然在最之前，我們需要安裝axios，使用命令 npm install axios --save 即可。
一、新建函數文件
在 src目錄 下新建一個 axios目錄，然后在里面創建 axios-request.js 和 axios-api.js 兩個文件，
其中 aixos-request.js 用于對axios進行封裝，axios-api.js 用于接口的統一管理。
二、對axios進行封裝
axios-request.js代碼如下：
import axios from "axios";
import { Message } from "element-ui";
// 創建一個axios實例
const axiosService = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 5000 // 設置超時時間為5s
});
// request攔截器 ==> 對請求參數進行處理
axiosService.interceptors.request.use(
config => {
// 可以在發送請求之前做些事情
// 比如請求參數的處理、在headers中攜帶token等等
return config;
}, error => {
// 處理請求錯誤
console.log(error); // for debug
Promise.reject(error);
}
);
// respone攔截器 ==> 對響應做處理
axiosService.interceptors.response.use(
response => {
const res = response.data;
// 如果自定義的返回碼不等于200, 就返回一個錯誤
if (res.code !== 200) {
return Promise.reject(new Error(res.message || "Error"))
} else {
return res;
}
}, error => {
// 判斷error的status代碼，并將對應的信息告知用戶
let text = "";
let err = JSON.parse(JSON.stringify(error));
if (err.response.status) {
switch (error.response.status) {
case 400:
text = "請求錯誤(400)，請重新申請";
break;
case 401:
text = "登錄錯誤(401)，請重新登錄";
return this.$router.replace("/login");
case 403:
text = "拒絕訪問(403)";
break;
case 404:
text = "請求出錯(404)";
break;
case 408:
text = "請求超時(408)";
break;
case 500:
text = "服務器錯誤(500)，請重啟軟件或切換功能頁！";
break;
case 501:
text = "服務未實現(501)";
break;
case 502:
text = "網絡錯誤(502)";
break;
case 503:
text = "服務不可用(503)";
break;
case 504:
text = "網絡超時(504)";
break;
case 505:
text = "HTTP版本不受支持(505)";
break;
default:
text = "網絡連接出錯";
}
} else {
text = "連接服務器失敗,請退出重試!";
}
Message({
showClose: true,
message: text,
type: "error"
});
return Promise.reject(error);
}
);
// 將寫好的axios實例暴露出去
export default axiosService;三、對接口進行統一管理
axios-api.js代碼如下：
import axiosService from "./axios-request"; // 從axios-request.js內引入axiosService
// 下面是POST形式
export const userLogin = data => {
return axiosService({
url: "/xxxx/user/xxxx", // 根據實際接口地址來寫
method: "post",
data
});
};
// 下面是GET形式
export const userInfo = params => {
return axiosService({
url: "/xxxx/user/xxxx", // 根據實際接口地址來寫
method: "get",
params
});
};這里要注意下，post參數放在data內，get參數放在params內！
四、在組件內使用寫好的接口
在組件中使用：
下面是模擬的一個登錄接口，代碼不太嚴謹，僅演示大致用法：
<script>
import {userLogin} from "@/axios/axios-api"; // 引入登錄接口函數
export default {
name: "login",
components: {},
methods: {
async login() {
let username = this.username;
let password = this.password;
let params = {
username: username,
password: password
};
if (!username || !password) {
alert("賬號或密碼不能為空");
} else {
if (username.length < 51 && password.length < 51) {
let res = await userLogin(params);
console.log(res);
} else {
alert("賬號或密碼輸入字符不能超過50位");
}
}
}
}
};
</script>上述就是小編為大家分享的Vue實現封裝Axios請求和攔截器的方法了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
