axios配置多个请求地址(打包后可通过配置文件修改)

开发过程中可能会遇到后端接口分布在多个地址下的情况,
这样调用不同接口时,就需要切换不同的请求地址;
我是这样处理的
核心代码:

// 2.请求拦截器
service.interceptors.request.use((config) => {console.log('config', config);//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换config.headers = {'Content-Type': 'application/x-www-form-urlencoded', //配置请求头// 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'};switch (config.urlType) {case 'api1':config.url = baseURL + config.url;break;case 'api2':config.url = baseURL2 + config.url;break;default:config.url = baseURL + config.url;}//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie// const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下// if(token){//   config.params = {'token':token} //如果要求携带在参数中//   config.headers.token= token; //如果要求携带在请求头中// }return config;},(error) => {Promise.reject(error);},
);

在axios实例service中,通过判断传入参数的字段来更改url地址
以get请求为例

完整代码:
axios实例:

/****   request.js   ****/
// 导入axios
import axios from 'axios';
// 使用element-ui Message做消息提醒
import { ElMessage } from 'element-plus';
let baseURL = configUrl.Base_Resource_URL; //index.html引入的
let baseURL2 = configUrl.Base_Resource_URL2;
//1. 创建新的axios实例，
const service = axios.create({// 超时时间 单位是ms，这里设置了3s的超时时间timeout: 3 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use((config) => {console.log('config', config);//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换config.headers = {'Content-Type': 'application/x-www-form-urlencoded', //配置请求头// 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'};switch (config.urlType) {case 'api1':config.url = baseURL + config.url;break;case 'api2':config.url = baseURL2 + config.url;break;default:config.url = baseURL + config.url;}//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie// const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下// if(token){//   config.params = {'token':token} //如果要求携带在参数中//   config.headers.token= token; //如果要求携带在请求头中// }return config;},(error) => {Promise.reject(error);},
);// 3.响应拦截器
service.interceptors.response.use((response) => {//接收到响应数据并成功后的一些共有的处理，关闭loading等return response;},(error) => {/***** 接收到异常响应的处理开始 *****/if (error && error.response) {// 1.公共错误处理// 2.根据响应码具体处理switch (error.response.status) {case 400:error.message = error.response.data.msg;break;case 401:error.message = '未授权，请重新登录';break;case 403:error.message = '拒绝访问';break;case 404:error.message = '请求错误,未找到该资源';window.location.href = '/';break;case 405:error.message = '请求方法未允许';break;case 408:error.message = '请求超时';break;case 500:error.message = '服务器端出错';break;case 501:error.message = '网络未实现';break;case 502:error.message = '网络错误';break;case 503:error.message = '服务不可用';break;case 504:error.message = '网络超时';break;case 505:error.message = 'http版本不支持该请求';break;default:error.message = `连接错误${error.response.status}`;}} else {// 超时处理if (JSON.stringify(error).includes('timeout')) {ElMessage.error('服务器响应超时，请刷新当前页');}error.message = '连接服务器失败';}ElMessage.error(error.message);/***** 处理结束 *****///如果不需要错误处理，以上的处理过程都可省略return Promise.resolve(error.response);},
);
//4.导入文件
export default service;

分别封装请求方式:

/** @Author: 老范* @Date: 2022-01-12 15:56:04* @LastEditors: 老范* @LastEditTime: 2022-01-19 11:52:42* @Description: 请填写简介*/
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request';const http = {/*** methods: 请求* @param url 请求地址* @param params 请求参数*/get(url, params, type) {const config = {method: 'get',url: url,urlType: type,};if (params) {config.params = params;}return request(config);},post(url, params, type) {const config = {method: 'post',url: url,urlType: type,};if (params) config.data = params;return request(config);},put(url, params, type) {const config = {method: 'put',url: url,urlType: type,};if (params) config.data = params;return request(config);},delete(url, params, type) {const config = {method: 'delete',url: url,urlType: type,};if (params) config.params = params;return request(config);},
};
//导出
export default http;

具体接口例子:

/** @Author: 老范* @Date: 2022-01-12 16:17:22* @LastEditors: 老范* @LastEditTime: 2022-01-19 11:53:39* @Description: 请填写简介*/
import http from '../utils/http';
let model = '/api/model/';// get请求//根据ID获得单个模型信息
export function getModelParams() {return http.get(`/api/getModelList`, {}, 'api2'); //使用第二个地址
}
// post请求
// 获取模型集列表
export function getModelViewListAPI(params) {return http.post(`/api/modelView/search`, params, 'api1');
}

这样在封装接口函数时即可控制其请求地址,并且由于地址是由静态文件引入的,所以打包后的资源中依然有原文件,可通过该文件更改地址

axios配置多个请求地址(打包后可通过配置文件修改)相关推荐

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口
我们的vue代码打包上传到服务器之后,生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只修改这个配置文件即可. 第一步:安装generate-asset-webpack-pl ...
nuxt.js 配置后端的请求地址
1.在nuxt.config.js中配置 env上下文环境 81是网关所在 module.exports = {env: {baseUrl: process.env.BASE_URL || 'http ...
discuz数据库迁移，改密码后，相关配置文件修改
网站系统需要修改的位置有两处 Discuz 和 UC-center ①路径:/wwwroot/config/config_global.php 这个根据你网站安装的路径而定. 打开 config_gl ...
no main manifest attribute maven package 运行打包后的jar包报错：xxx.jar中没有主清单属性通过配置 maven plugin 解决
文章目录命令行运行生成的jar包,报错解决手动修复修改打包规则一劳永逸 MANIFEST.MF demo Others IDEA 中关于 main class 的配置命令行运行生成的jar ...
直接打包的服务器组件,Vue-CLI-2.x全家桶架构，支持打包后自动部署到服务器构建案例...
今天有时间分享一些平时自己开发上的一些构建配置,我们以Vue-CLI-2.x来构建开发环境. 好,我们先来看一下我们要做哪些工作. 现附上源码地址,https://github.com/7492643 ...
# Vue 配置前端后端路由地址
Vue 配置前端后端路由地址前端路由配置配置项目地址修改 config/index.js的配置文件 proxyTable: {'/api': { //使用"/api"来代替t ...
kali linux查询自己的ip,Kali Linux常用服务配置教程获取IP地址
Kali Linux常用服务配置教程获取IP地址下面以Kali Linux为例,演示获取IP地址的方法 (1)设置网络接口为自动获取IP地址.在Kali Linux的收藏夹中单击图标,将显示所有的程 ...
vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
如何修改Vue打包后文件的接口地址配置
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

axios配置多个请求地址(打包后可通过配置文件修改)

axios配置多个请求地址(打包后可通过配置文件修改)相关推荐

最新文章

热门文章