Vue3第7课：Vue3中模块化深入--刷新随机出现一张狗狗图片

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

开发前的准备工作，首先我们需要一个接口："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,响应式数据不用等异步执行完成。

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