Vue3.0版本发送ajax请求

首先简单写一点json数据用来测试

{
    "name":"杨幂",
    "age":18,
    "gender":"女"

}

再来写Ajax接口用来在前台引入做铺垫

import {ref} from "vue"
//引入axios
import axios  from "axios";
//发送ajax请求
export default function(url:string){
    //加载状态
    const loading = ref(true)
    //加载请求信息
    const data = ref(null)
    //加载错误信息
    const errorMsg = ref("")
    //发送请求
    axios.get(url).then(response=>{
        loading.value=false
        data.value=response.data
    }).catch(error=>{
        loading.value=false
        errorMsg.value=error.message || "未知错误"
    })
    return{
        loading,
        data,
        errorMsg
    }
}

以上创建3个实例分别是登录信息，请求信息，错误信心

登陆成功的话，登录信息-false，并且显示响应数据

登陆失败的话，登录信息-false，并且显示错误信息。

<template>
  <div>
   <h2>x-{{x}} y-{{y}}</h2>
   <h2 v-if="loading">正在加载中...</h2>
   <h2 v-else-if="errorMsg">错误信息 {{errorMsg}} </h2>
   <h2 v-else></h2>
   <h2>
     <ul>
       <li> {{data.name}} </li>
       <li> {{data.age}} </li>
       <li> {{data.gender}} </li>
     </ul>
   </h2>
  </div>
</template>
<script lang="ts">
import useRequest from "./hooks/useRequest"
import { defineComponent } from 'vue';
import useMousePosition from "./hooks/useMousePosition"
export default defineComponent({
  name:'App',
  setup(){
    const{x,y} = useMousePosition()
    const{loading,data,errorMsg} = useRequest("./data/data.json")
    return {
    x,
    y,
    loading,
    data,
    errorMsg
  }
  }
 
})
</script>