先安装axios：

npm install axios

第一步：项目src下创建一个名为request的文件夹（看一下示例图）：

然后在request下创建两个api.ts和index.ts的文件

api.ts里的内容：（url写你自己的接口）

//我要用到的一些接口
import service from "@/request/index";// 接口
export function login() {//接口ILoginData接口的变量名return service({url: "/index.php/index/index/index",      //写你自己的接口method: "GET" })
}// // 接口
// export function getGoodsList(){
//     return service({
//         url: "/getGoodsList",
//         method: "GET"
//     })
// }

index.ts里的内容：（baseURL：“里写你自己的接口地址“）

import axios from "axios";
//创建axios实例
const service = axios.create({baseURL: " ",   //写你自己的接口地址timeout: 5000,//超时时间headers: {//编译语言"Content-type": "application/json;charset=utf-8"}
})
//请求拦截
//就是你请求接口的时候，我会先拦截下来，对你的数据做一个判断，或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据config.headers = config.headers || {}  // 没有数据的话就设置为空设置为数据if (localStorage.getItem("token")) {//先确保登录config.headers.token = localStorage.getItem("token") || ""}return config//必须返回出去，不然请求发不出去
}, error => {//处理错误请求return Promise.reject(error)
})
//响应拦截：后端返回来的结果
service.interceptors.response.use((res) => {const status: number = res.status//code是后端的状态码if (status !== 200) {//请求失败（包括token失效，302，404...根据和后端约定好的状态码做出不同的处理）return Promise.reject(res)} else {//请求成功console.log(res, '成功----')return Promise.resolve(res.data)}
}, (err) => {console.log(err, '错误信息的处理')//错误信息的处理//处理错误响应return Promise.reject(err)
})//因为别的地方要用，所以就把实例暴露出去，导出
export default service

在你自己的页面使用引入api接口（以下示例代码是我的调用接口，改成你自己的）：

<template><div><ul v-for="(item,index) in arr" :key="index"><li>{{item}}</li></ul></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { login } from '../request/api'; // 引入你的API接口// 定义一个响应式引用以存储API响应
// const response = ref(null);const arr = ref<string[]>([]); // 在组件挂载后调用接口
onMounted(async () => {login().then(res => {// response.value = res;arr.value = res.data as string[];// console.log(res.data);})
});
</script>