vue中使用axios固定url請求前綴
更新時間：2022年12月09日 10:29:09 作者：Agwenbi
這篇文章主要介紹了vue中使用axios固定url請求前綴的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用axios固定url請求前綴
main.js中添加：
使用方法：
定義axios默認路徑前綴或動態(tài)修改前綴
如：每個請求url前都要加一個前綴,但會根據(jù)開發(fā)環(huán)境不同而變化,那么我們可以寫一個方法去引用,方便后面維護
.env.development 開發(fā)文件中寫入要用的服務編碼
# 微服務編碼 VUE_APP_SERVICE_PREFIX = '/0201010254'
src/settings.js 新建的settings文件中引入
module.exports = {
? /**
? ?* 主站標題
? ?* @type {string}
? ?*/
? title: '開發(fā)項目名稱',
?
? /**
? ?* @type {boolean} true | false
? ?* @description Whether fix the header
? ?*/
? fixedHeader: false,
?
? /**
? ?* @type {string | array} 'production' | ['production', 'development']
? ?* @description Need show err logs component.
? ?* The default is only used in the production env
? ?* If you want to also use it in dev, you can pass ['production', 'development']
? ?*/
? errorLog: 'production',
? /**
? ?* base API
? ?*/
? baseApi: process.env.VUE_APP_BASE_API,
? /**
? ?* 服務編碼
? ?*/
? servicePrefix: process.env.VUE_APP_SERVICE_PREFIX,
?
}之后請求文件中引入
新建api/app.js 封裝axios請求并引用自定義的服務編碼文件
// 應用層封裝接口
import request from '@/utils/request'
import settings from '@/settings'
?
// 獲取配置 不需替換
export function getAppConfig(params) {
? return request({
? ? url: settings.servicePrefix + '/config',
? ? method: 'get',
? ? params
? })
}其中的request文件是引用自建的請求攔截文件,根據(jù)各自需求
import axios from 'axios'
import store from '@/store'
import { getToken, removeToken } from '@/utils/auth'
?
const BASE_URL = process.env.VUE_APP_BASE_API
?
// create an axios instance
const service = axios.create({
? // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
? // withCredentials: true, // send cookies when cross-domain requests
? timeout: 60 * 1000 // request timeout
})
?
// request interceptors
service.interceptors.request.use(
? config => {
? ? // do something before request is sent
? ? // 設置baseURL
? ? config.baseURL = config.url.startsWith('/mock') ? '' : BASE_URL
? ? const token = getToken()
? ? if (!config.noAuth && token) {
? ? ? // let each request carry token
? ? ? config.headers['Authorization'] = token
? ? }
? ? if (store.state.user.info && store.state.user.info.comId) {
? ? ? config.headers['comId'] = store.state.user.info.comId
? ? ? config.headers['comCode'] = store.state.user.info.comCode
? ? ? config.headers['groupUserCode'] = store.state.user.info.groupUserCode
? ? ? config.headers['userCode'] = store.state.user.info.userCode
? ? }
? ? return config
? },
? error => {
? ? // do something with request error
? ? return Promise.reject(error)
? }
)
?
// response interceptor
service.interceptors.response.use(
? /**
? ?* If you want to get http information such as headers or status
? ?* Please return ?response => response
? ?*/
?
? /**
? ?* Determine the request status by custom code
? ?* Here is just an example
? ?* You can also judge the status by HTTP Status Code
? ?*/
? response => {
? ? if (response.headers.newjwt) {
? ? ? store.dispatch('user/setToken', response.headers.newjwt)
? ? }
? ? if ((response.data.status && +response.data.status === 16) || response.status === 401) {
? ? ? if (response.status === 401) {
? ? ? ? return Promise.reject('沒有接口權限，請聯(lián)系管理員')
? ? ? } else {
? ? ? ? setTimeout(() => {
? ? ? ? ? // 清除登錄狀態(tài)
? ? ? ? ? removeToken()
? ? ? ? ? window.location.href = '/'
? ? ? ? }, 1000)
? ? ? ? return Promise.reject('登錄超時，請重新登錄')
? ? ? }
? ? }
? ? if (response.config.handleResponse) {
? ? ? return response
? ? } else {
? ? ? const { head, body } = response.data
? ? ? // 舊數(shù)據(jù)格式分為head和body兩部分，現(xiàn)在使用ApiResponse不會再出現(xiàn)這兩部分，此處為兼容舊格式的臨時方案
? ? ? if (head && body) {
? ? ? ? // 正常返回
? ? ? ? if (+head.code === 1) {
? ? ? ? ? return body
? ? ? ? } else {
? ? ? ? ? return Promise.reject(head.msg || '未知錯誤')
? ? ? ? }
? ? ? } else {
? ? ? ? const { status, statusText, data } = response.data
? ? ? ? if (+status === 0) {
? ? ? ? ? return data
? ? ? ? } else {
? ? ? ? ? if (response.config.handleError) {
? ? ? ? ? ? return Promise.reject(response.data)
? ? ? ? ? } else {
? ? ? ? ? ? return Promise.reject(statusText || '未知錯誤')
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? },
? error => {
? ? // 非取消請求
? ? if (!axios.isCancel(error)) {
? ? ? // 401無權限判斷
? ? ? if (error.response && error.response.status === 401) {
? ? ? ? return Promise.reject('沒有接口權限，請聯(lián)系管理員')
? ? ? } else if (error.response && error.response.status === 531) {
? ? ? ? setTimeout(() => {
? ? ? ? ? // 清除登錄狀態(tài)
? ? ? ? ? removeToken()
? ? ? ? ? window.location.href = '/'
? ? ? ? }, 1000)
? ? ? ? return Promise.reject('登錄超時，請重新登錄')
? ? ? }
? ? }
? ? return Promise.reject(error)
? }
)
?
export default servicerequest.js中把token內(nèi)容抽離出來方便管理
src下新建/utils/auth.js
import Cookies from 'js-cookie'
?
const TokenKey = 'Admin-Token'
?
export function getToken() {
? return Cookies.get(TokenKey)
}
?
export function setToken(token) {
? if (!token || token === 'null') {
? ? return
? }
? sessionStorage.setItem('jwt', token)
? return Cookies.set(TokenKey, token)
}
?
export function removeToken() {
? return Cookies.remove(TokenKey)
}最終頁面使用axios
import { getAppConfig } from '@/api/app'
//請求
?const params = {}
? ? ? ? getAppConfig(params).then(res => {
? ? ? ? ? this.loading = false
? ? ? ? ? console.log(res)
? ? ? ? }).catch(e => {
? ? ? ? ? this.loading = false
? ? ? ? ? this.$message.error(e.toString())
? ? ? ? })總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue 項目打包通過命令修改 vue-router 模式 修改 API 接口前綴
這篇文章主要介紹了vue 項目打包通過命令修改 vue-router 模式 修改 API 接口前綴的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
這篇文章主要介紹了vue?項目頁面卡死原因排查分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家詳細介紹了vue-table實現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue是一種流行的Web開發(fā)框架,它提供了一個雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實時的響應其變化,這篇文章主要給大家介紹了關于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09