简介
关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法。
一、axios配置
由于可能会有多个插件应用,所以有了plugins(utils里面放的是封装的事件处理方法),自行新建相关文件
1.安装axios
npm install axios --save
2.‘plugins/index.js’ 配置
// 导出所有插件
let moduleFiles = require.context('./modules', true, /\.js$/);
export default moduleFiles;
3.环境地址变量配置(axios请求时的服务器地址)
3.1方式一
在项目顶层目录中新建三个文件,分别写入对应的环境配置
.env.development
NODE_ENV = 'production' // 打包模式
outputDir = 'dev' // 要打包到的目录名称
VUE_APP_ENVIRONMENT = 'developmentEnv' // 区分开发环境、测试环境和生产环境的变量
VUE_APP_BASE_API = 'http://xxx.xxx.xxx:8080'
.env.test
NODE_ENV = 'production'
outputDir = 'test'
VUE_APP_ENVIRONMENT = 'testEnv'
VUE_APP_BASE_API = 'https://xxx.xxx.xxx:8081'
.env.production
NODE_ENV = 'production'
outputDir = 'dist'
VUE_APP_ENVIRONMENT = 'productionEnv'
VUE_APP_BASE_API = 'https://xxx.xxx.xxx:8082'
使用
process.env.VUE_APP_BASE_API
3.2方式二
新建一个放在’/public/'目录下的urlConfig.js
文件(当然,其他地方也可以,只是这里可以在打包后进行js文件编辑)
/** 程序/DB版本
* serverType: D-开发, T-测试, P-正式
* java/db: 版本号
*/
window.versions = {
serverType: 'T', // 发布环境
java: '2.20.220430', // 服务器对应的版本号
db: '2.06.220602' // 当前项目的版本号
}
console.log(window.versions)
/* ['后台服务地址', '上传文件地址', '生成文件地址'] */
const AllServerAPI = {
dev: ['http://xxx.xxx.xxx:8080', '', ''],
test: ['https://xxx.xxx.xxx:8081', '', ''],
pro: ['https://xxx.xxx.xxx:8082', '', '']
}
/* 每次只需要修改此处,即可配置对应的请求环境 */
const findAPI = AllServerAPI['dev']
/* 服务器请求地址 */
window.serverAPI = {
baseUrl: findAPI[0],
uploadUrl: findAPI[1],
fileUrl: findAPI[2],
}
使用
// 默认主地址
window.serverAPI.baseUrl
// 注意上传、创建等其他服务的请求时,注意修改axios的请求地址即可
window.serverAPI.uploadUrl
window.serverAPI.fileUrl
4.'axios.js’配置
'use strict';
import axios from 'axios';
// import store from "@/store";
// import { message } from "ant-design-vue"
import {
getAllPromise } from '@/utils/tools';
import {
triggerEvent } from '@/utils/events';
// 完整配置参考: https://github.com/axios/axios#request-config
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.put['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.delete['Content-Type'] =
'application/json;charset=utf-8';
let config = {
// baseURL: window.serverAPI.baseUrl || '', // 此处即在获取请求的服务器地址
baseURL: process.env.VUE_APP_BASE_API || process.env.apiUrl || '', // 此处即在获取请求的服务器地址
timeout: 60 * 1000,
withCredentials: false,
crossDomain: true,
transformRequest: [
(data) => {
if (!data || typeof data === 'string') {
return data;
}
if (data instanceof FormData) {
return data;
}
// 对Blob对象进行处理
let hasBlob = Object.values(data).some((it) => {
return it instanceof Blob;
});
if (!hasBlob) {
return JSON.stringify(data);
}
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => {
formData.append(key, value);
});
return formData;
},
],
};
const _axios = axios.create(config);
// 注册all方法,执行多个并发请求
// 可传入Promise、包含Promise的数组、返回值为Promise的方法
_axios.all = (...requsets) => {
// 获取所有Promise对象