vue3和vue2，共用的封装axios请求

第一种写法：

在src下创建api的目录，在该目录下创建request.js文件

import axios from 'axios';
import { ElMessage } from 'element-plus'
const baseApi = ''  // 请求地址
const request = axios.create({
  baseURL: baseApi, // 测试环境
  timeout: 10 * 1000, // 请求超时时间
  // 其他配置...
});
 
// 请求拦截器
request.interceptors.request.use(
  config => {
    // 可以在这里添加认证token等
    // if (store.getters.token) {
    //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    // }
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
request.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    console.log(response, "response")
    if (response.status == 200 && response.data.code == 200) {
      return response.data;
    } else {
      ElMessage.error(response.data.msg)
      return Promise.reject(response.data.msg)
    }
  },
  error => {
    // 响应错误处理
    console.log(error, "error")
    return Promise.reject(error);
  }
);
 
export {
  request,
  baseApi
} 

再创建一个form.js【如何使用封装的axios】

import { request } from './request';
 
// 表单的接口
export function addContact(data) {
  return request({
    url: '/function/contact',
    method: 'post',
    data: data
  })
}

在你的.vue文件引用该接口 

import { addContact } from '../../api/form'


addContact(ruleForm).then(response => {
  
})

第二种写法：

新建 .env.development和.env.production文件

 .env.development的内容如下：

# 页面标题
VUE_APP_TITLE = ****官网

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = 'http://****'

 .env.production的内容如下：

# 页面标题
VUE_APP_TITLE = ****官网

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = 'http://****'

新建request.js文件，内容如下：

import Vue from 'vue'

import axios from 'axios';  
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const instance = axios.create({  
    baseURL: process.env.VUE_APP_BASE_API,  
    timeout: 30000  
});  
instance.interceptors.request.use(  
    function (config) {  
        // Check if token exists  
        const token = localStorage.getItem('token');  
        console.log(token);
        if (token) {  
            config.headers.Authorization = `${token}`;
        }  
        return config;  
    },  
    function (error) {  
        console.error('Request Interceptor Error:', error);  
        return Promise.reject(error);  
    }  
);  
instance.interceptors.response.use(  
    function (response) {  
        if(response.status==200 && response.data &&  response.data.code == 200){
            // 对响应数据做点什么  
            console.log('响应数据')
            return response;    
        } else {
            console.log('报错')
            Vue.prototype.$message({
                message: response.data.message,
                type: 'error'
            });
            return Promise.reject()
        }
    },  
    function (error) {  
        // Handle response error  
        if (error.response) {  
            // 服务器响应了请求，但返回了错误的状态码  
            // 检查状态码  
            switch (error.response.status) {  
                case 400:  
                    console.error('Bad Request', error.response.data);  
                    break;  
                case 401:  
                    console.error('Unauthorized', error.response.data);  
                    window.location.href='/login'
                    break;  
                case 403:  
                    console.error('Forbidden', error.response.data);  
                    break;  
                case 404:  
                    console.error('Not Found', error.response.data);  
                    break;  
                case 500:  
                    console.error('Internal Server Error', error.response.data);  
                    break; 
                // 添加更多的 case 来处理其他 HTTP 状态码  
                default:  
                    console.error('Response Interceptor Error:', error.response.data);  
            }  
        } else if (error.request) {  
            // 请求已经发起，但没有收到响应  
            console.error('No response received', error.request);  
            return Promise.reject(error);  
        } else {  
            // 设置请求时触发了错误  
            console.error('Error', error.message);  
        }  
        // 总是返回拒绝的 Promise  
        return Promise.reject(error);  
    }  
);
export default instance;

如何使用封装的axios以及如何引用该接口，与第一种的写法一致