一、api层：

1、service.js

处理请求拦截和响应拦截

// requset/service.js
import axios from 'axios'
// 创建一个axios实例
const service = axios.create({
    // 设置请求的基础路径
    baseURL: "",
    // 设置请求超时的时间
    timeout: 8000
})

// 处理请求拦截 页面-->拦截器-->服务器，在请求发送之前统一执行某些操作
service.interceptors.request.use((config) => {
    // 成功的方法，在请求头统一添加token值
    let toekn = sessionStorage.getItem("token")
    token && (config.headers["token"] = token)
    return config
},(err)=>{
    // 失败的方法
    return Promise.reject(err)
})
// 处理响应拦截 服务器-->拦截器-->页面，在接收响应结果之前统一执行某些操作
service.interceptors.response.use((res)=>{
    // 成功的方法，可能后台返回的数据并不是我想要的
    // 处理状态码
    let data = res.data
    return data
},(err)=>{
    return Promise.reject(err)
    
})

export default service

2、common.js

处理请求方式和请求参数

import service from "./service"
// 处理get
export function requestGet(url,data){
    // 处理参数
    // 特殊的处理...
    return service.get(url,data)
}
// 处理post
export function requestPost(url,data){
    // 处理参数
    return service.post(url,data)
}

3、api文件夹

业务js

// api/app.js
// 处理业务
import {requestGet,requestPost} from "../common.js"
// 获取列表数据
export function getList(url,data){
    return new Promise((resolve,reject)=>{
        // 参数，地址
        requertGet(url,data).then(res=>{
            // 处理结果
            resolve(res)
        }).catch(err=>{
            // 处理结果
            reject(err)
        })
    })
}
// 登录
export function login(url,data){
    return new Promise((resolve,reject)=>{
        // 参数，地址
        requestPost(url,data).then(res=>{
            // 处理结果
            resolve(res)
        }).catch(err=>{
            // 处理结果
            reject(err)
        })
    })
}

二、使用示例

import {getList,login} from "@/request/api/app.js"

onMounted(()=>{
    getList("/getList").then((res)=>{
        console.log(res)
    })
    login("/login",{username:"",password:""}).then((res)=>{
        console.log(res)
    })
})