把狗狗的url 换成 猫猫的 url ，仍旧加载不出来。但是下面的猫猫图片能加载出来，所以可能不是猫猫API的问题。那为什么上面那个猫猫图片加载不出来呢？

DogShow.vue 组件的代码：

<template>
  <img src="result && result.message">
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'

export default defineComponent({
  // 当函数用 async 包裹的时候，函数里面可以采用 wait 方式来操作异步请求，返回结果还会用 Promise 进行自动包裹
  async setup() {
    const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      result: rawData.data
    }
  }
})
</script>

<style>
</style>

App.vue 组件的代码：

<template>
  <img alt="Vue logo"
       src="./assets/logo.png">
  <h1> {{count}} </h1>
  <h1> {{double}} </h1>
  <h1> {{greetings}} </h1>

  <h1> {{error}} </h1>

  <!-- Suspense 的使用 -->
  <Suspense>
    <!-- Suspense 有两个具名插槽 -->
    <template #fallback>
      <!-- 这里展示加载前的内容 -->
      <h1>Loading...</h1>
    </template>
    <template #default>
      <!-- 这里展示加载后的内容 -->
      <div>
        <async-show />
        <dog-show />
      </div>
    </template>
  </Suspense>

  <!-- Teleport 的使用 -->
  <button @click="openModal"> Open Modal </button>
  <modal :isOpen="modalIsOpen"
         @close-modal="onModalClose"> My modal! </modal>

  <h1 v-if="loading">Loading!...</h1>
  <img v-if="loaded"
       :src="result[0].url">
  <h1> X: {{x}}, Y: {{y}} </h1>
  <button @click="increase"> 👍+1 </button>
  <button @click="updateGreeting"> Update Title </button>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  toRefs,
  watch,
  onErrorCaptured
} from 'vue'
import useMousePosition from './hooks/useMousePosition'
import Modal from './components/Modal.vue'
import useURLLoader from './hooks/useURLLoader'
import AsyncShow from './components/AsyncShow.vue'
import DogShow from './components/DogShow.vue'

interface DataProps {
  count: number
  double: number
  increase: () => void
}

interface DogResult {
  message: string
  status: string
}

interface CatResult {
  id: string
  url: string
  width: number
  height: number
}

export default defineComponent({
  components: { Modal, AsyncShow, DogShow },

  name: 'App',
  setup() {
    const error = ref(null)
    // 因为我们不知道error具体是什么类型，所以设置为 any 类型
    onErrorCaptured((e: any) => {
      error.value = e
      // 这个钩子函数要返回一个布尔值，表示这个错误是否向上传播
      return true
    })
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2)
    })
    const { x, y } = useMousePosition()
    // const { result, loading, loaded } = useURLLoader<DogResult>(
    //   'https://dog.ceo/api/breeds/image/random'
    // )
    const { result, loading, loaded } = useURLLoader<CatResult[]>(
      'https://api.thecatapi.com/v1/images/search'
    )
    watch(result, () => {
      // console.log(result.value.message)
      // type guard
      if (result.value) {
        // console.log('value', result.value.message)
        console.log('value', result.value[0].url)
      }
    })

    const greetings = ref('')
    const updateGreeting = () => {
      greetings.value += 'Hello!'
    }
    watch([greetings, () => data.count], (newValue, oldValue) => {
      console.log(newValue)
      console.log(oldValue)
      document.title = 'updated' + greetings.value
    })
    const refData = toRefs(data)

    const modalIsOpen = ref(false)
    const openModal = () => {
      modalIsOpen.value = true
    }
    const onModalClose = () => {
      modalIsOpen.value = false
    }
    return {
      ...refData, // 展开后为 count, increase, double
      greetings,
      updateGreeting,
      x,
      y,
      result,
      loading,
      loaded,

      modalIsOpen,
      openModal,
      onModalClose,

      error
    }
  }
})
</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>