需要就是当咱们每次刷新页面时，调用接口申请一张随机图片展现在页面上。

开发前的筹备工作，首先咱们须要一个接口："https://dog.ceo/api/breeds/image/random",此接口为行业内大佬提供，请大家善待；另外咱们须要应用到vue中的axios,应用npm install axios --save进行装置。

既然是模块化，咱们天然须要提供一个办法供各个组件应用

咱们仍旧在hooks目录下新建一个useUrlAxios.ts,内容如下
import { ref } from 'vue'import axios from 'axios'function useUrlAxios(url: string) {  const result = ref(null)  const loading = ref(true)  const loaded = ref(false)  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 {    result,    loading,    loaded,    error  }}export default useUrlAxios
接下来就是如果应用这个办法，咱们新建一个Random.vue文件，代码如下
<template>  <div>    <div>刷新页面随机呈现一张狗狗狗图片</div>    <div v-if="loading">Loading.....</div>    <img v-if="loaded" :src="result.message" />  </div></template><script lang="ts">import useUrlAxios from "@/hooks/useUrlAxios";const app = {  name: "Beauity",  setup() {    const { result, loading, loaded } = useUrlAxios(      "https://dog.ceo/api/breeds/image/random"    );    return { result, loading, loaded };  },};export default app;</script>


当loading为true时，显示loading文字，loaded为true时呈现图片

这样咱们的需要就实现了，写到这里兴许会有疑难，axios申请是异步的呀。还没申请完结，就曾经返回了，所以loaded不会为true,咱们来看一下在vue2中这样写会怎么样，间接上代码。

新建一个serve.js
import axios from "axios";function useUrlAxios(url) {  let result = null;  let loading = true;  let loaded = false;  let error = null;  axios    .get(url)    .then((res) => {      loading = false;      loaded = true;      result = res.data;      console.log(1);    })    .catch((e) => {      error = e;      loading = false;    });  console.log(2);  return {    result,    loading,    loaded,    error,  };}export default useUrlAxios;
在App.vue中应用
<template>  <div id="app">    App    <div v-if="loading">Loading.....</div>    <img v-if="loaded" :src="result.message" />  </div></template><script>import useUrlAxios from "@/utils/serve.js";export default {  name: "App",  components: {},  data() {    return {      loading: true,      loaded: false,      result: {},    };  },  mounted() {    console.log(useUrlAxios("https://dog.ceo/api/breeds/image/random"));  },};</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

代码写的过程中，会发现在vue2中不能达到同样的成果，在vue2的两个文件中我进行了3次console。查看控制台看一下打印程序。

咱们会发现异步引起的问题导致了loading始终为true，loaded始终为false，然而在vue3中因为应用ref,响应式数据不必等异步执行实现。

有大佬看到此篇文章，麻烦斧正。