如何配置axios以支持打包后通过配置文件修改多个请求地址？

本文共计1030个文字，预计阅读时间需要5分钟。

目录 + Axios配置多个请求地址（打包后可通过配置文件修改） + 核心代码 + 完整代码 + Axios请求方法 + Axios中各种方法调用接口 + GET方法 + POST方法 + DELETE方法 + PUT方法 + Axios配置多个请求地址（打包后可通过配置文件修改）

目录

• axios配置多个请求地址(打包后可通过配置文件修改)
• 核心代码
• 完整代码
• axios请求方法
• axios中各种方法调用接口
• get方法
• post方法
• delete方法
• put方法

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 = 'api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios的单一实例化配置

const instance = axios.create({   baseURL: 'api.example.com' }); instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios拦截器的使用

可以使用axios拦截器来在发送请求之前或在响应response之前（then方法）来拦截请求并进行自定义的设置，定义request和response拦截器示例如下

axios.interceptors.request.use(function (config) {     return config;   }, function (error) {     return Promise.reject(error);   });   axios.interceptors.response.use(function (response) {     return response;   }, function (error) {     return Promise.reject(error);   })

删除拦截器的时候

const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。