Vue中Axios配置不同的baseURL,請(qǐng)求不同的域名接口方式

更新時(shí)間：2024年07月24日 09:02:59 作者：波塞西呀

這篇文章主要介紹了Vue中Axios配置不同的baseURL,請(qǐng)求不同的域名接口方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

最近使用 Vue2.0開(kāi)發(fā)項(xiàng)目,開(kāi)發(fā)過(guò)程遇到一個(gè)問(wèn)題，由于項(xiàng)目需要拆分成多個(gè)小的模塊,接口地址來(lái)源不一致。每個(gè)模塊有不同的接口地址。而模塊之間公用的接口就出現(xiàn)在同一項(xiàng)目請(qǐng)求多個(gè)接口地址問(wèn)題。

于是在網(wǎng)上看了問(wèn)題解決辦法，都不太實(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');
  }