VUE：axios配置及接口请求路径api配置

前端-如此如此。

已于 2022-11-28 17:11:16 修改

阅读量1.4w

点赞数 12

分类专栏： web前端之VUE axios 文章标签： vue

于 2021-09-01 12:03:42 首次发布

本文链接：https://blog.csdn.net/weixin_44136505/article/details/120036326

版权

本文详细介绍了在Vue项目中如何配置axios，包括安装、环境变量配置、axios.js与工具文件配置，以及接口路径API的组织与分类。同时，针对Vue2.x和Vue3.x的不同，提供了axios的全局注入方法，并给出了请求接口的使用示例。文章还提醒在axios错误处理中，可以结合UI框架如Ant Design的message进行提示。

摘要由CSDN通过智能技术生成

简介

关于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对象