vue中封裝axios并實現api接口的統一管理
在vue項目中，我們通常都是使用axios與后臺進行數據交互，axios有很多好用的特性，這里不多做介紹，相關細節可以查閱axios中文網。在對axios進行封裝之前，我們要使用vue腳手架工具創建一個vue項目（這里我用的是cli4）。
安裝cnpm install axios --save-dev; // 安裝axioscnpm install qs --save-dev; // 安裝qs模塊，用來序列化post類型的數據，否則后端無法接收到數據模塊引入
在src目錄下創建一個service目錄，用于存放接口封裝的相關文件。然后在service目錄中創建service.js，用于axios、qs模塊的引入，并在此文件中對axios進行封裝。代碼如下（接口域名只有一個的情況）：
import axios from ’axios’ //引入axiosimport qs from ’qs’ //引入qs，用來序列化post類型的數據，否則后端無法接收到數據// 設置post請求頭axios.defaults.headers.post[’Content-Type’] = ’application/x-www-form-urlencoded;charset=UTF-8’;axios.defaults.withCredentials = false;//在跨域請求時，不會攜帶用戶憑證；返回的 response 里也會忽略 cookie//創建axios實例，請求超時時間為300秒const instance = axios.create({ timeout: 300000,});//請求和響應攔截可以根據實際項目需求進行編寫// 請求發起前攔截instance.interceptors.request.use((config) => {//這里可以對接口請求頭進行操作 如：config.headers[’X-Token’] = token console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})// 響應攔截（請求返回后攔截）instance.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})//按照請求類型對axios進行封裝const api={ get(url,data){return instance.get(url,{params:data}) }, post(url,data){return instance.post(url,qs.stringify(data)) }, }export {api}
上述代碼是接口域名只有一個的情況（多數情況），當接口域名有多個的時候（少數情況），我們需要對之前的封裝進行改造，代碼如下：
import axios from ’axios’ //引入axiosimport qs from ’qs’ //引入qs，用來序列化post類型的數據，否則后端無法接收到數據// 設置post請求頭axios.defaults.headers.post[’Content-Type’] = ’application/x-www-form-urlencoded;charset=UTF-8’;axios.defaults.withCredentials = false;//在跨域請求時，不會攜帶用戶憑證；返回的 response 里也會忽略 cookie//創建axios實例，請求超時時間為300秒，因為項目中有多個域名，所以對應的也要創建多個axios實例const instanceA = axios.create({ timeout: 300000,});const instanceB = axios.create({ timeout: 300000,});//如果項目為單一域名，這里可以不用進行配置，當項目接口有多個域名時，要對axios實例基礎路徑進行配置，否則在項目生產環境中無法進行區別調用if (process.env.NODE_ENV == ’production’) { instanceA.defaults.baseURL = ’https://www.production_a.com’; instanceB.defaults.baseURL = ’https://www.production_b.com’;}//請求和響應攔截可以根據實際項目需求進行編寫// 請求發起前攔截instanceA.interceptors.request.use((config) => {//這里可以對接口請求頭進行操作 如：config.headers[’X-Token’] = token console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})instanceB.interceptors.request.use((config) => { console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})// 響應攔截（請求返回后攔截）instanceA.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})instanceB.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})//按照請求類型對axios進行封裝const api={ get(url,data){return instanceA.get(url,{params:data}) }, post(url,data){return instanceA.post(url,qs.stringify(data)) }, doGet(url,data){return instanceB.get(url,{params:data}) }, doPost(url,data){return instanceB.post(url,qs.stringify(data)) } }export {api}
上述代碼中有根據生產環境對axios實例的基礎路徑進行配置，如果項目中有多個環境（如：測試環境等），則需要對CLI4腳手架環境變量進行配置
api接口統一管理將api接口按照功能模塊進行拆分，把同一模塊下的接口寫在同一個文件中進行統一管理，這樣代碼會更容易維護。比如我們的項目中有新聞模塊，音樂模塊等。我們就在serviec目錄中創建news.js、music.js文件，用于管理各自模塊的所有api接口，這里我只拿news.js文件為例，代碼如下：
import {api} from './service.js';const news={getNewsList(){//獲取新聞列表return api.get('api/news/getNewsList')},editNewsDetail(data){//修改新聞詳情return api.post('api/news/editNewsDetail',data);}}export default news;
為了更方便在項目中調用這些封裝好的接口，我們需要將這些接口掛載到vue的原型上，首先我們要在service目錄中創建api.js文件，將所有模塊的api管理文件引入進來，然后進行統一導出，代碼如下：
//引入相關api管理模塊import news from './news.js';//進行統一導出export default {news}
找到項目中的main.js文件,將接口掛載到vue的原型上，代碼如下：
import Vue from ’vue’import App from ’./App.vue’import router from ’./router’import store from ’./store’import axios from ’axios’Vue.prototype.axios=axiosVue.config.productionTip = falseimport api from './service/api.js';//將封裝的接口掛載到vue原型上Vue.prototype.$api = api;new Vue({ router, store, render: h => h(App)}).$mount(’#app’)
然后我們在項目創建完成時自動生成的模板文件App.vue調用封裝好的接口，代碼如下：
<template> <div id='app'> <div id='nav'><router-link to='/'>Home</router-link> |<router-link to='/about'>About</router-link><button @click='getN'>接口封裝getN</button><button @click='postN'>接口封裝postN</button> </div> <router-view/> </div></template><script>export default {methods:{getN(){this.$api.news.getNewsList().then((res)=>{console.log(res);})},postN(){let openid='oO5tQ5VMPpuzLqwfXhpmwjqwSANM';let productCodes='pro-1337270496655446016';this.$api.news.editNewsDetail({openid,productCodes}).then((res)=>{alert(res.data.msg);})}}}</script><style lang='scss'>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}#nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }}</style>配置代理
因為我們要在本地環境進行測試，這就涉及到了跨域問題，為了解決跨域問題，我們可以進行代理的配置，在項目根目錄中創建vue.config.js文件，然后可以對項目進行各種配置，代理的配置方法如下：
// vue.config.jsmodule.exports = { // 輸出文件目錄 outputDir: 'dist', // eslint-loader 是否在保存的時候檢查 lintOnSave: false, // 基本路徑 publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { host: 'localhost', port: 8080, open: true, hotOnly: true, // 熱更新 // 設置代理 proxy: { '/api': { // 本地mock服務器 target: 'https://www.xxxx.com/xxx/', changeOrigin: true, ws: false, }, //如果項目中存在多個域名接口，可依次進行配置'/apib':{target: 'https://www.xxxx.com/xxx/',changeOrigin: true,ws: false,}, }, },};
代理配置好了之后，就可以運行項目了，命令行中輸入npm run serve,項目啟動好了之后，就可以進入頁面點擊按鈕，測試之前做的封裝是否好用。
結語以上就是本人對vue中封裝axios的一點心得，文章有錯誤或需要改進的地方還請與我聯系，我將及時進行更正，感謝閱讀。
以上就是vue中封裝axios并實現api接口的統一管理的詳細內容，更多關于vue 封裝axios的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備