vue封裝axios與api接口管理的完整步驟
一、前言
axios的封裝和api接口的統(tǒng)一管理,其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護。
二、axios封裝步驟
安裝:npm install axios -S
一般我會在項目的src目錄中,新建一個network文件夾,作為我們的網(wǎng)絡(luò)請求模塊,然后在里面新建一個http.js和一個api.js文件和一個reques.js。http.js文件用來封裝我們的axios,api.js用來統(tǒng)一管理我們的接口url, request.js對外暴露我們放在的api方法。
// 在http.js中引入axios import axios from 'axios'; // 引入axios import router from '../router'; // vant的toast提示框組件,大家可根據(jù)自己的ui組件更改。 import { Toast } from 'vant';
我們的項目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認請求地址就不多說了。
創(chuàng)建config目錄。
目錄下創(chuàng)建env.development.js+env.production.js+env.test.js
env.development.js內(nèi)容:
module.exports={ baseUrl:' http://www.devele.com:4456' //開發(fā)環(huán)境用到的baseurl }
設(shè)置請求超時
通過axios.defaults.timeout設(shè)置默認的請求超時時間。例如超過了10s,就會告知用戶當前請求超時,請刷新等。
// 環(huán)境的切換 const {baseUrl}=require('../config/env.'+process.env.NODE_ENV); //同時 package.json的scripts需指定測試環(huán)境的模式 --mode test "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode test", "lint": "vue-cli-service lint" } const service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: false, // send cookies when cross-domain requests timeout: 1000*12 // 請求超時 })
post請求頭的設(shè)置
post請求的時候,我們需要加上一個請求頭,所以可以在這里進行一個默認的設(shè)置,即設(shè)置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8
// 設(shè)置post請求頭 service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
請求攔截
我們在發(fā)送請求前可以進行一個請求的攔截,為什么要攔截呢,我們攔截請求是用來做什么的呢?比如,有些請求是需要用戶登錄之后才能訪問的,或者post請求的時候,我們需要序列化我們提交的數(shù)據(jù)。這時候,我們可以在請求被發(fā)送之前進行一個攔截,從而進行我們想要的操作。
// 先導(dǎo)入vuex,因為我們要使用到里面的狀態(tài)對象 // vuex的路徑根據(jù)自己的路徑去寫 import store from '@/store/index'; // 請求攔截器 service.interceptors.request.use( config => { // 不傳遞默認開啟loading if (!config.hideloading) { // 請求是是否開啟loading Toast.loading({ forbidClick: true }) } // 每次發(fā)送請求之前判斷vuex中是否存在token // 如果存在,則統(tǒng)一在http請求的header都加上token,這樣后臺根據(jù)token判斷你的登錄情況 // 即使本地存在token,也有可能token是過期的,所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷 if (store.state.token) { config.headers.token = store.state.token; //有些接口是 config.headers.Authorization = token } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } )
這里說一下token,一般是在登錄完成之后,將用戶的token通過localStorage或者cookie存在本地,然后用戶每次在進入頁面的時候(即在main.js中),會首先從本地存儲中讀取token,如果token存在說明用戶已經(jīng)登陸過,則更新vuex中的token狀態(tài)。然后,在每次請求接口的時候,都會在請求的header中攜帶token,后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期,如果沒有攜帶,則說明沒有登錄過。這時候或許有些小伙伴會有疑問了,就是每個請求都攜帶token,那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢?其實,你前端的請求可以攜帶token,但是后臺可以選擇不接收。
響應(yīng)攔截
// 響應(yīng)攔截器 service.interceptors.response.use( response => { // 如果返回的狀態(tài)碼為200,說明接口請求成功,可以正常拿到數(shù)據(jù) // 否則的話拋出錯誤 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服務(wù)器狀態(tài)碼不是2開頭的的情況 // 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼 // 然后根據(jù)返回的狀態(tài)碼進行一些操作,例如登錄過期提示,錯誤提示等等 // 下面列舉幾個常見的操作,其他需求可自行擴展 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登錄 // 未登錄則跳轉(zhuǎn)登錄頁面,并攜帶當前頁面的路徑 // 在登錄成功后返回當前頁面,這一步需要在登錄頁操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); break; // 403 token過期 // 登錄過期對用戶進行提示 // 清除本地token和清空vuex中token對象 // 跳轉(zhuǎn)登錄頁面 case 403: Toast({ message: '登錄過期,請重新登錄', duration: 1000, forbidClick: true }); // 清除token store.dispatch('FedLogOut').then(() => { // 跳轉(zhuǎn)登錄頁面,并將要瀏覽的頁面fullPath傳過去,登錄成功后跳轉(zhuǎn)需要訪問的頁面 router.replace({ path: '/login', query: { redirect:router.currentRoute.fullPath } }) }) break; // 404請求不存在 case 404: Toast({ message: '網(wǎng)絡(luò)請求不存在', duration: 1500, forbidClick: true }); break; // 其他錯誤,直接拋出錯誤提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); }else { // 處理斷網(wǎng)的情況 // eg:請求超時或斷網(wǎng)時,更新state的network狀態(tài) // network狀態(tài)在app.vue中控制著一個全局的斷網(wǎng)提示組件的顯示隱藏 // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù),會在斷網(wǎng)組件中說明 store.commit('changeNetwork', false); } }); //最后導(dǎo)出實例 export default service;
三、api接口統(tǒng)一管理
新建了一個api文件夾,里面有一個index.js,以及多個根據(jù)模塊劃分的接口js文件。index.js是一個api的出口,其他js則用來管理各個模塊的接口。
例如下面的article.js:
/** * article模塊接口列表 */ import request from '@/network/http'; // 導(dǎo)入http中創(chuàng)建的axios實例 import qs from 'qs'; // 根據(jù)需求是否導(dǎo)入qs模塊 const article = { // 新聞列表 articleList () { return request({ url: '/artical', method: 'get', params, hideloading: false //設(shè)置不隱藏加載loading }) }, // 新聞詳情,演示 articleDetail (id, params) { return request({ url: '/detail', method: 'get', params:{ goodsId }, hideloading: true }) }, // post提交 login (data) { return request({ url:'/adduser', method:'post', data:qs.stringify(data), //注意post提交用data參數(shù) hideloading: true }) } // 其他接口………… } export default article;
index.js代碼
/** * api接口的統(tǒng)一出口 */ // 文章模塊接口 import article from '@/api/article'; // 其他模塊的接口…… // 導(dǎo)出接口 export default { article, // …… } 在組件中的使用(按需導(dǎo)入) import {article} from '@/api/index' created(){ article.articleList().then(info=>{ if(info.code==200) this.num=info.data } }) }
api掛載到vue.prototype上省去引入的步驟
為了方便api的調(diào)用,我們需要將其掛載到vue的原型上。在main.js中
import Vue from 'vue' import App from './App' import router from './router' // 導(dǎo)入路由文件 import store from './store' // 導(dǎo)入vuex文件 import api from './api' // 導(dǎo)入api接口 Vue.prototype.$api = api; // 將api掛載到vue的原型上復(fù)制代碼
然后我們在組件中可以這么用
//無需導(dǎo)入 methods: { onLoad(id) { this.$api.article.articleDetail(id, { api: 123 }).then(res=> { // 執(zhí)行某些操作 }) } } 斷網(wǎng)情況處理 <template> <div id="app"> <div v-if="!network"> <h3>我沒網(wǎng)了</h3> <div @click="onRefresh">刷新</div> </div> <router-view/> </div> </template> <script> import { mapState } from 'vuex'; export default { name: 'App', computed: { ...mapState(['network']) }, methods: { // 通過跳轉(zhuǎn)一個空頁面再返回的方式來實現(xiàn)刷新當前頁面數(shù)據(jù)的目的 onRefresh () { this.$router.replace('/refresh') } } } </script> // refresh.vue beforeRouteEnter (to, from, next) { next(vm => { vm.$router.replace(from.fullPath) }) }
總結(jié)
到此這篇關(guān)于vue封裝axios與api接口管理的文章就介紹到這了,更多相關(guān)vue封裝axios與api接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題
這篇文章主要介紹了vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue-video-player 通過自定義按鈕組件實現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實現(xiàn)全屏切換效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08