Vue中Axios配置不同的baseURL,請(qǐng)求不同的域名接口方式
最近使用 Vue2.0開發(fā)項(xiàng)目,開發(fā)過程遇到一個(gè)問題,由于項(xiàng)目需要拆分成多個(gè)小的模塊,接口地址來(lái)源不一致。每個(gè)模塊有不同的接口地址。而模塊之間公用的接口就出現(xiàn)在同一項(xiàng)目請(qǐng)求多個(gè)接口地址問題。
于是在網(wǎng)上看了問題解決辦法,都不太實(shí)用,所以在這里記錄一下我的解決辦法,各個(gè)項(xiàng)目差異性導(dǎo)致每個(gè)項(xiàng)目有不同間距辦法,這里的辦法供參考。。。。
Vue2.0項(xiàng)目中Axios配置不同的baseURL,請(qǐng)求不同的域名接口
準(zhǔn)備工作1
準(zhǔn)備一個(gè)utls.js 文件(路徑自己存放,我放到@/config/api中)
// 導(dǎo)出 對(duì)應(yīng)的不同接口的URL地址 const configUrl = { Base_store_URL: 'http://store.xxx.com', //模塊一接口地址 Base_api2_URL: 'http://api.xxx.com', //模塊二接口地址 } export default configUrl
準(zhǔn)備工作2
準(zhǔn)備一個(gè)公用的request.js文件,并導(dǎo)入的apiUrl.js接口路徑文件中(import request from ‘@/utils/request’)
import axios from 'axios' import $store from '@/store' import router from '../router' import baseUrl from '@/config/api' //const baseUrl = 'http://api2.65ph.com' // const instance = axios.create({ // // baseURL: 'http://api2.test.com', // timeout: 5000, // // withCredentials:true // }) const defaultOpt = { login: true } let that = this function baseRequest (options) { let instance = ''; if(!options) return false switch(options.urlType){ case 'api': instance = axios.create({ baseURL: baseUrl.Base_store_URL, timeout: 5000, withCredentials:true }) break; default: instance = axios.create({ baseURL: baseUrl.Base_api2_URL, timeout: 5000, withCredentials:true }) } axios.defaults.withCredentials = true const token = $store.state.app.token // console.log(token) const headers = options.headers || {} headers['Authorization'] = token // headers["Authori-zation"] = "Bearer" + token options.headers = headers // 判斷未登錄 if (options.login && !token) { // qudengl toLogin() return Promise.reject({ msg: '未登錄', toLogin: true }) } // console.log(options) return instance(options).then(res => { const data = res.data || {} if (res.status !== 200) return Promise.reject({ msg: "請(qǐng)求失敗", res, data }) if ([410000, 410001, 410002].indexOf(data.status) !== -1) { // 去登錄 toLogin() return Promise.reject({ msg: res.data.msg, res, data, toLogin: true }) }else if (data.status === 200) { return Promise.resolve(data, res) } else { return Promise.reject({ msg: res.data.msg, res, data }) } }) } /** * http 請(qǐng)求基礎(chǔ)類 * 參考文檔 https://www.kancloud.cn/yunye/axios/234845 * */ const request = ["post", "put", "patch"].reduce((request, method) => { /** * * @param url string 接口地址 * @param data object get參數(shù) * @param options object axios 配置項(xiàng) * @param urlType object axios 請(qǐng)求接口路徑域名區(qū)分 * @returns {AxiosPromise} */ request[method] = (url, data = {}, options = {},urlType) => { return baseRequest( Object.assign({ url, data, method ,urlType}, defaultOpt, options) ); }; return request; }, {}); ["get", "delete", "head"].forEach(method => { /** * * @param url string 接口地址 * @param params object get參數(shù) * @param options object axios 配置項(xiàng) * @param urlType object axios 請(qǐng)求接口路徑域名區(qū)分 * @returns {AxiosPromise} */ request[method] = (url, params = {}, options = {}, urlType) => { return baseRequest( Object.assign({ url, params, method, urlType }, defaultOpt, options) ); }; }); export default request
在接口文件中這樣傳參
import request from '@/utils/request' export function getZbData (page) { return request.get('index/zbxm', {page: page}, { login: false }) } /** * 文章列表 * @returns {*} * api 我們判斷模塊的參數(shù) */ export function getArticleList(q, cid) { return request.get("/api/article/list/" + cid, q, { login: false },'api'); }
我們調(diào)用接口時(shí)這樣使用
import { getArticleList} from '@/api/public' // 在methods中 // 文章列表 get_article_list(){ let that = this let q = { page: that.page, limit: that.limit }; getArticleList(q,that.cid).then(res=>{ that.$set(that,'articleList',res.data) }) },
Vue3.0項(xiàng)目中Axios配置不同的baseURL,請(qǐng)求不同的域名接口
其他地方都和上述相同,只要
準(zhǔn)備工作2
準(zhǔn)備一個(gè)公用的request.js文件中的用法有差異
import axios from 'axios' import { Message } from 'iview' import { getCookies, removeCookies } from '@/libs/util' import Setting from '@/setting' import {toLogin} from './login' import baseUrl from '@/config/api' const service = axios.create({ // baseURL: Setting.apiBaseURL, timeout: 10000, // 請(qǐng)求超時(shí)時(shí)間 // withCredentials:true }) // 請(qǐng)求攔截器 service.interceptors.request.use( config => { // console.log(config) // console.log('============================') switch(config.urlType){ case 'api': config.url = baseUrl.Base_store_URL + config.url break; default: config.url = baseUrl.Base_api2_URL + config.url } const token = getCookies('login_status') if (token) { // config.headers['Authori-zation'] = token config.headers['Authorization'] = token } console.log(config) return config }, error => { // do something with request error return Promise.reject(error) } ) axios.defaults.withCredentials = true// 攜帶cookie // response interceptor service.interceptors.response.use( response => { let status = response.data ? response.data.status : 0 const code = status console.log('狀態(tài)',code) switch (code) { case 200: return response.data case 400:case 400011:case 400012: return Promise.reject(response.data || { msg: '未知錯(cuò)誤' }) case 410000: case 410001: case 410002: toLogin() break default: break } }, error => { Message.error(error.msg) return Promise.reject(error) } ) export default service
使用時(shí)
/** * 文章詳情 * @returns {*} */ export function getarticle(id) { return request({ url: '/api/article/details/' + id, method: 'get', params: '', urlType: 'api' }) // return request.get("/api/article/details/" + id, {}, { login: false },'api'); }
總結(jié)
優(yōu)點(diǎn):
1.在不同的組件調(diào)用不同的方法就可以實(shí)現(xiàn),不同的接口請(qǐng)求數(shù)據(jù);
2.維護(hù)接口方便,以后上線之后,把a(bǔ)pi.js中的接口全部更換成線上接口即可;
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue 彈窗時(shí) 監(jiān)聽手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時(shí) 監(jiān)聽手機(jī)返回鍵關(guān)閉彈窗功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值(頁(yè)面不跳轉(zhuǎn)) ,需要的朋友可以參考下2019-05-05vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例
本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08Vue3中實(shí)現(xiàn)過渡動(dòng)畫的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)過渡動(dòng)畫的一些常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10vue中axios的post請(qǐng)求,415錯(cuò)誤的問題
這篇文章主要介紹了vue中axios的post請(qǐng)求,415錯(cuò)誤的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn)
本文主要介紹了vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06vue項(xiàng)目引入本地bootstrap不生效問題及解決
這篇文章主要介紹了vue項(xiàng)目引入本地bootstrap不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue+Ant Design進(jìn)行大數(shù)據(jù)量下拉框卡頓與表單提交優(yōu)化
在現(xiàn)代前端開發(fā)中,處理大數(shù)據(jù)量渲染和表單交互是常見的挑戰(zhàn),本文將探討如何優(yōu)化 Ant Design Vue 下拉框在大數(shù)據(jù)量情況下的性能問題,并解決表單提交后重復(fù)提示的問題,需要的可以了解下2025-03-03