import axios from 'axios';
import { getToken } from '../utils/token';
import { showMessage } from './status'; // 引入状态码文件
// import { ElMessage } from 'element-plus';   // 引入el提示框  // 可以删除
// import { Promise } from 'core-js'; // 不需要引入

// 设置接口超时时间
axios.defaults.timeout = 30000;
// 请求地址,动态赋值的环境变量
axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_API;

const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 30000,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;' },   // 传参方式表单
    // 'Content-Type': 'application/json;charset=UTF-8',    // 传参方式为json
})

// 请求拦截器
service.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么,例如添加token等
        config.headers = {
            'Authorization': getToken('token')   // 身份认证
        }
        return config;
    },
    (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    (response) => {
        const { code } = response.data;
        // 对响应数据做些什么
        if (code === '0') {
            return response.data;
        } else {
            // ElMessage.error('系统出错'); // 应该放在 else 语句中
            return Promise.reject(new Error('Error')); // 应该放在 else 语句中
        }

        // 响应数据为二进制流处理(Excel导出)
        // if (response.data instanceof ArrayBuffer) {
        //     return response;
        // }
    },
    (error) => {
        // 对响应错误做些什么
        const { response } = error;
        if (response) {
            // 请求已发出但不在 200 的范围内
            showMessage(response.status);   // 传入响应码,匹配对应的响应码信息
            return Promise.reject(response); // 直接返回response对象
        } else {
            // ElMessage.error("网络连接异常,请稍后再试!"); // 使用单引号
        }
        return Promise.reject(error.message);
    }
)

export default service

说明:

  1. 引入的 axios 是使用 CDN 或者 npm 包管理工具安装的,具体取决于项目环境。
  2. element-plus 库中的 ElMessage 组件没有使用,已删除。
  3. Promise 是 ES6 中的内置对象,不需要引入。
  4. getTokenshowMessage 函数需要在其他文件中定义。
  5. ElMessage.error('系统出错')return Promise.reject(new Error('Error')) 应该放在 if (code === '0')else 语句中。
  6. return Promise.reject(response.data) 应该改为 return Promise.reject(response)
  7. 导出的是 service,需要在其他地方使用。

注意:

  • 使用单引号代替双引号,符合 JavaScript 代码规范。
  • import.meta.env.VITE_APP_BASE_API 是使用 vite 开发时动态获取环境变量的方式。
  • getToken('token') 函数需要根据实际情况实现,用于获取用户身份验证的 token。
  • showMessage 函数需要根据实际情况实现,用于显示状态码信息。
  • 代码中注释部分可以根据实际情况修改或删除。
  • 确保在项目中正确引入 axios 和其他依赖库。
  • 使用 service 对象发送 HTTP 请求。

示例:

import service from './http';

service.get('/api/users')
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error(error);
    });
Axios 请求拦截器和响应拦截器示例

原文地址: https://www.cveoy.top/t/topic/qjuD 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录