VUE3封装axios调用接口

在src的api文件夹下添加一个request.js

import axios from 'axios';
import { ElMessage } from 'element-plus'

const http = axios.create({
  baseURL: '', // 基础URL
  timeout: 10 * 1000, // 请求超时时间
  // 其他配置...
});
 
// 请求拦截器
http.interceptors.request.use(
  config => {
    // 可以在这里添加认证token等
    // if (store.getters.token) {
    //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    // }
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
http.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 default http;

分模块调用如首页接口：

在src下建立一个home.js

import request from './request';
 
// 合作与留言的接口
export function addContact(data) {
  return request({
    url: '/function/contact/addContact',
    method: 'post',
    data: data
  })
}

使用你的数据接口

引入：

import { listDept } from '../../api/enter'

使用：

onMounted(() => {
    let obj = {
        parentId: 100
    }
    listDept(obj).then(response => {
        response.data.forEach(item => {
            item.hasChildren = Boolean(item.hasChildren)
        })
        deptList.value = response.data
    });
})