关于前端: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,响应式数据不必等异步执行实现。

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