Vue封裝Axios請求和攔截器的步驟
PS:本文程式碼在vue-cli3構建的基礎vue專案之上進行編寫:vue create my-project
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>
上面的程式碼中我們用了 async await,是ES7新出的特性,具體用法可以Google或者到MDN上檢視。
五、總結
當然也可以不將介面統一管理,而只用axios封裝,然後在元件內寫非同步請求函式。
以上是個人在之前學習的時候,所用的封裝方式,如有錯誤之處歡迎留言指正。
以上就是Vue封裝Axios請求和攔截器的步驟的詳細內容,更多關於Vue封裝的資料請關注我們其它相關文章!