乐趣区

关于前端:Vue3第7课Vue3中模块化深入刷新随机出现一张狗狗图片

jiezi

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

开发前的筹备工作，首先咱们须要一个接口："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, 响应式数据不必等异步执行实现。

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

退出移动版