在vue3中使用axios

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>

更多可以参考vue3+axios+vite+ts前后端联动-CSDN博客