51.使用vue3+vite+typescript+element_plus的setup语法糖实现发送axios的get请求http://localhost:3000/users接口数据,将获取到的json数据显示在页面上

发布时间 2023-05-29 14:03:09作者: 种太阳
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

interface User {
  id: number
  name: string
}

const users = ref<User[]>([])

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:3000/users')
    users.value = response.data
  } catch (error) {
    console.error(error)
  }
})
</script>

  

在这个例子中,我们使用了 ref 来创建一个响应式的 users 变量。在 onMounted 钩子函数中,我们使用 axios 发送了一个 GET 请求到 http://localhost:3000/users 接口,并将获取到的数据赋值给 users 变量。

最后,我们使用 v-for 指令将 users 数组中的每个元素渲染到页面上。