vue3.0学习记录(4)

安装axios

npm install axios --save

安装完成之后就可以调用axios发送请求了

发送请求

如新建一个ts文件，发送一个简单的请求：

import { ref } from 'vue'
import axios from 'axios'

function useURL<T>(url: string){
    const loading = ref(true)
    const loaded = ref(false)
    const result = ref<T | null>(null)
    const error = ref(null)

    axios.get(url).then((res)=>{
        loading.value = false;
        loaded.value = true;
        result.value = res.data;
    }).catch((e)=>{
        error.value = e;
        loading.value = false;
    })

    return{
        loading,
        loaded,
        result,
        error
    }
}
export default useURL

在vue文件中调用：

<template>
  <div>
    <h1 v-if="loading">loading...</h1>
    <img v-if="loaded" :src="result.message">
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useurl from './test/useURL'

interface DogResult{
  message: string;
  status: string;
}
//  确定类型，都为string类型

export default defineComponent({
  name: 'App',
  setup(){
    const {loading,loaded,result} = useurl<DogResult>('https://dog.ceo/api/breeds/image/random')

    return{
      loading,loaded,result
    }
  }
});
</script>

就会出现以下页面：
首先还没有请求到数据，显示加载中

然后请求到数据，正确显示狗狗图片

简单的get请求就完成了