1. 安装：npm install axios

2. 配置基础实例

// utils/http.js
import axios from "axios";

// 创建实例
 const httpInstance = axios.create({
     baseURL:'https://pcapi-xiaotuxian-front-devtest.itheima.net',
     timeout:5000
 })
// 如果项目里需要得到接口基地址不同，可以这样做
// axios.create()方法可以执行多次，每次执行就会生成一个新的实例
// const httpInstance2 = axios.create({
//     baseURL:'url2',  // 基地址
//     timeout:5000    // 超时器
// })

//拦截器
httpInstance.interceptors.request.use(config=>{
    return config
},e=>Promise.reject(e))

//响应器
httpInstance.interceptors.response.use(res=> res.data,e=>{
    return Promise.reject(e)
})

// 导出
export default httpInstance

3. 

// apis/layout.js
import httpInstance from "@/utils/http";

 export function getCategoryAPI (){
    return httpInstance({
        url:'/home/category/head'
    })
}

4. 使用

<script setup>
import {getCategoryAPI} from "@/apis/layout";
import {onMounted, ref} from "vue";

const categoryList = ref([])
const getCategory = async ()=>{
   const res = await getCategoryAPI()
    console.log(res)
    categoryList.value=res.result
}

onMounted(()=>{
    getCategory()
})
</script>

<template>
    <ul class="app-header-nav">
        <li class="home" v-for="item in categoryList" :key="item.id">
            <RouterLink to="/">{{ item.name }}</RouterLink>
        </li>
    </ul>
</template>