前后端分离

以django一文中写的demo为例子，写一下前端调用后端api的方式
后端接口/menu/sapi

前端axios封装
封装处理器（关于环境隔离这块参考vue篇）

import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from 'axios';

function request(config: any) {
    const instance = axios.create({
        baseURL: import.meta.env.VITE_APP_BASE_URL,
        timeout: 5000
    });

    instance.interceptors.request.use((config: any) => {
        //响应拦截，处理身份验证
        return config;
    }, (err) => {
        console.log(err);
    });

    instance.interceptors.response.use((res: AxiosResponse) => {
      //响应拦截，用于处理错误
        return res.data ? res.data : res;//返回响应的 data 字段，如果 data 字段不存在，则返回完整的响应。
    }, (err) => {
        console.log(err);
    });

    return instance(config);
}

export default request

封装api

import request from "./requestconfig"


function getMainMenu(){
  return request({
    url:"/menu/sapi",
  })
}

在app.vue中尝试调用

<script setup lang="ts">
import getMainMenu from '@/network/home'
import {type AxiosResponse } from 'axios';
getMainMenu().then((res: AxiosResponse)=>{
  console.log(res) //因为这里直接返回了res.data，所以不需要手动写.data
})
</script>