vue中封裝axios並實現api接口的統一管理
在vue項目中，我們通常都是使用axios與後臺進行數據交互，axios有很多好用的特性，這裡不多做介紹，相關細節可以查閱axios中文網。在對axios進行封裝之前，我們要使用vue腳手架工具創建一個vue項目（這裡我用的是cli4）。
安裝
cnpm install axios --save-dev; // 安裝axios cnpm install qs --save-dev; // 安裝qs模塊，用來序列化post類型的數據，否則後端無法接收到數據
模塊引入
在src目錄下創建一個service目錄，用於存放接口封裝的相關文件。然後在service目錄中創建service.js，用於axios、qs模塊的引入，並在此文件中對axios進行封裝。代碼如下（接口域名隻有一個的情況）：
import axios from 'axios' //引入axios
import 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' //引入axios
import 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=axios
Vue.config.productionTip = false
import 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.js
module.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的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- vue中如何簡單封裝axios淺析
- vue項目中如何使用mock你知道嗎
- 解決axios:"timeout of 5000ms exceeded"超時的問題
- vue網絡請求方案原生網絡請求和js網絡請求庫
- vue中axios封裝使用的完整教程