1.安装axios
npm i axios
2.创建文件useAxios.ts引用axios
//导入axios
import axios from 'axios'
const API = axios.create({
baseURL:'http://localhost:5220/api', //请求后端数据的基本地址
timeout: 2000 //请求超时设置,单位ms
})
//导出
export default API
3.在组件使用
<template>
<div class="about">
<ul>
<li v-for="(item,id) in testData1.list" :key="id">{{ item.title }}</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import API from "./hook/useAxios"
const testData = reactive({
list: []
});
function all(){
API({
url: '/Todo',
method: 'get'
}).then((res: any) => {
testData.list = res.data
}).catch((error) => {
console.error(error);
});;
}
onMounted(() => {
all();
});
</script>