在我們使用vue開發的時候,請求後台我們通常使用axios這些第三方庫來實現,但是我們在使用的時候,遇到乙個問題,我們每乙個請求都需要帶上token,這樣就增加了我們的重複工作量。
所以,我們可以對axios做乙個封裝,讓我們使用它的時候,自動帶入token和url的字首(url的字首生產環境和開發環境可以不同)
好了,直接上**:
import axios from 'axios'
import vue from 'vue';
import qs from 'qs';
//import store from '@/store';
import from 'element-ui';
import router from '@/router/index.js';
//import store from '@/store'
const service = axios.create()
// request interceptor
service.interceptors.request.use(
config =>
else if(config.isfile&&config.isfile===true)
else
} let token = sessionstorage.getitem("token");
if (token&&token!=='')
return config
},error =>
)// response interceptor
service.interceptors.response.use(res => else if (code !== 1) )
return promise.reject(res.data)
} else
},error => )
return promise.reject(error)})
export default service
使用的時候的呼叫方法:
//json的上傳格式:
request(,
isobj:true
}).then(res => );
//form表單的上傳格式:
request(
}).then(res => );
比如:
在.env.development中定義:
在.env.production中定義:
假如需要走**,可以在.env.development這樣定義
再在vue.config.js裡定義**
devserver: }},
disablehostcheck: true
},
vue專案封裝axios
還是直奔主題吧,因為官方不推薦使用vue resource,而是推薦axios,所以這篇文章分享給大家我在自己的專案裡如何封裝axios,雖說將axios在main.js裡寫入vue的原型鏈作為vue的屬性 vue.prototype.http axios 直接用最原始的方法也能進行請求 這樣也不是...
vue簡單封裝axios
1 在src下新建api資料夾,在api資料夾下新建config.js檔案 2 config.js配置如下 import axios from axios import qs from qs mint ui 框架,若不需要請全部注釋掉 import from mint ui axios.defaul...
vue 封裝axios請求
最近接手新的vue專案,發現axios竟然沒有封裝,立馬動手封裝,這裡記錄一下完整的封裝過程,廢話不說,直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...