Vue 项目中Axios配置不同的baseURL,请求不同的域名接口

最近使用 Vue2.0开发项目,开发过程遇到一个问题,由于项目需要拆分成多个小的模块,接口地址来源不一致。每个模块有不同的接口地址。而模块之间公用的接口就出现在同一项目请求多个接口地址问题。于是在网上看了问题解决办法,都不太实用,所以在这里记录一下我的解决办法,各个项目差异性导致每个项目有不同间距办法,这里的办法经供参考,欢迎多多留言,一起成长。。。。。。

Vue2.0 项目中Axios配置不同的baseURL,请求不同的域名接口

准备工作1, 准备一个utls.js 文件(路径自己存放,我放到@/config/api中)

// 导出 对应的不同接口的URL地址
const configUrl = {
  Base_store_URL: 'http://store.xxx.com', //模块一接口地址
  Base_api2_URL: 'http://api.xxx.com', //模块二接口地址
}
export default configUrl

准备工作2,准备一个公用的request.js文件,并导入的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: "请求失败", 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 请求基础类
 * 参考文档 https://www.kancloud.cn/yunye/axios/234845
 *
 */
const request = ["post", "put", "patch"].reduce((request, method) => {
  /**
   *
   * @param url string 接口地址
   * @param data object get参数
   * @param options object axios 配置项
   * @param urlType object axios 请求接口路径域名区分
   * @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参数
   * @param options object axios 配置项
   * @param urlType object axios 请求接口路径域名区分
   * @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 我们判断模块的参数
 */
export function getArticleList(q, cid) {
  return request.get("/api/article/list/" + cid, q, { login: false },'api');
}

我们调用接口时这样使用

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 项目中Axios配置不同的baseURL,请求不同的域名接口

其他地方都和上述相同,只要
准备工作2,准备一个公用的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, // 请求超时时间
    // withCredentials:true
})

// 请求拦截器
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('状态',code)
        switch (code) {
        case 200:
            return response.data
        case 400:case 400011:case 400012:
            return Promise.reject(response.data || { msg: '未知错误' })
        case 410000:
        case 410001:
        case 410002:
            toLogin()
            break
        default:
            break
        }
    },
    error => {
        Message.error(error.msg)
        return Promise.reject(error)
    }
)

export default service

使用时

  
  /**
   * 文章详情
   * @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');
  }

总结

优点:
1,在不同的组件调用不同的方法就可以实现,不同的接口请求数据;
2,维护接口方便,以后上线之后,把api.js中的接口全部更换成线上接口即可;

  • 9
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 Vue 项目使用 axios 发送 post 请求,需要先安装 axios,然后在需要发送请求的组件导入并使用。例如: ``` <template> <div> <button @click="submitForm">提交</button> </div> </template> <script> import axios from 'axios' export default { methods: { async submitForm() { try { const res = await axios.post('/api/submit', { data: this.formData }) console.log(res.data) } catch (err) { console.error(err) } } } } </script> ``` 在这个例子,当用户点击按钮时,会发送一个 post 请求到 /api/submit,请求包含 formData。 ### 回答2: 在Vue项目,我们可以使用Axios来进行HTTP请求。其Axios的post方法可以用于提交数据到后端服务端,对于Vue项目的表单提交等场景非常实用。 Axios.post(url[, data[, config]])方法通过传入参数的方式实现提交请求,其url参数指定需要提交到的后端服务端的接口地址,data参数则是需要进行提交的数据,最后的config参数则用于指定Axios请求配置选项,如请求头、客户端权限等。 在实际的项目开发,我们常常需要使用Axios.post来向后端提交数据,例如用户的登录、注册等操作。在Vue项目,我们可以将Axios.post绑定到组件的methods,并通过Vue的双向绑定来实现与表单元素的交互。 对于表单提交等场景,我们需要注意一些细节问题,例如数据的合法性验证、防止表单的重复提交等。同时,在网络请求过程,我们也需要注意处理一些异常情况,例如请求失败、超时等。 总之,在Vue项目Axios.post方法的应用非常广泛。通过熟练掌握Axios.post的用法,我们可以更加高效地完成Vue项目的开发工作,提升开发效率和项目质量。 ### 回答3: Vue是一个强大的JavaScript框架,而axios是一个非常好用的第三方库,专门用于发送HTTP请求。在Vue项目使用axios发送POST请求,可以轻松地从前端向后端发送数据,并获取返回结果。 首先,在Vue项目安装axios库。可以使用npm或yarn命令执行以下命令: ``` npm install axios --save ``` 或 ``` yarn add axios ``` 确保在项目导入axios库。常见的方法是在main.js文件设置axios的全局配置: ```js import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios ``` 这样就可以在整个Vue应用程序使用axios库了。 接下来,就可以开始使用axios发送POST请求了。首先,需要确定自己向哪个URL发送请求。然后,可以调用axios的post方法,并将需要发送的数据作为参数传入。 ```js this.$axios.post('/api/login', { username: 'admin', password: '123456' }) .then(response => { console.log(response.data) }) .catch(error => { console.error(error) }) ``` 以上代码向URL为'/api/login'发送了一个POST请求,并传入了一个包含用户名和密码的对象作为数据参数。在.then方法获取了服务器返回的数据,并在.catch方法处理请求错误。 这里需要注意的是,axios发送POST请求时,必须指定请求头Content-Type为application/json。可以使用axios的默认请求头,或自己手动设置请求头。 ```js this.$axios.post('/api/login', { username: 'admin', password: '123456' }, { headers: { 'Content-Type': 'application/json' } }) ``` 以上代码手动设置了请求头为application/json。如果数据不是JSON格式,需要改变Content-Type值。 总的来说,使用axios发送POST请求非常简单,只需确定URL和数据,调用axios的post方法即可。在.then方法处理服务器返回的数据,在.catch方法处理请求错误。如果需要手动设置请求头,可以使用headers属性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值