P13:Suspense组件-深入学习 真实请求

上节我们是一个假的异步请求,利用了setTimeOut()方法来模拟异步请求,当然这也很恰当的演示了Suspense的使用方法。本节我们就深入一下,用以前请求北海九号餐厅三大美女服务员的API真实接口来继续深入学习一下。

编写随机美女的异步组件

/src/components/目录下,新建一个GirlShow.vue的新组件。

我们先来写个基本的模板,其实你可以把这段代码复制进你的程序,因为这段代码你一定打过很多遍了。

<template>

</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
    setup() {

    }
})
</script>

再向下写,需要注意的是,上节课的例子,我们返回的是一个promise对象,其实我个人是不喜欢promise这种写法的,我更喜欢用async...await的写法,它是promise的语法糖。建议你在工作中也尽量的使用async...await的写法。

Suspense也是支持async...await的语法的,所以这个组件就用async的写法来写。

<template>
    <img :src="result && result.imgUrl"  />
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
    async setup() {  //promise 语法糖  返回之后也是promise对象
        const rawData = await axios.get('https://api.mybj123.com/default/getGirl')
        return {result:rawData.data}
    }
})
</script>

这样组件就编写完成了,看起来是比纯Promise的写法好看很多了。

引入组件并使用Suspense组件

打开App.vue页面,然后先用import引入GirlShow.vue

import GirlShow from "./components/GirlShow.vue";

然后在components中声明一下,就可以在模板中使用了

const app = {
  name: "App",
  components: { AsyncShow, GirlShow },
  setup() {
    return {};
  },
};

模板部分代码:

<template>
  <div>
    <Suspense>
      <template #default>
         <girl-show />
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

这部分写完,就可以打开服务yarn serve,然后到http://localhost:8080/预览一下结果哦。注意,我的服务器设置了缓存,所以你可能几次刷新都会是同一张照片,这个不是你的问题。但你也要注意,自己是不是也有图片缓存。

处理异步请求错误

在异步请求中必须要作的一件事情,就是要捕获错误,因为我们没办法后端给我们返回的结果,也有可能服务不通,所以一定要进行捕获异常和进行处理。

vue3.x的版本中,可以使用onErrorCaptured这个钩子函数来捕获异常。在使用这个钩子函数前,需要先进行引入。

import { ref , onErrorCaptured} from "vue";

有了onErrorCaptured就可以直接在setup()函数中直接使用了。钩子函数要求我们返回一个布尔值,代表错误是否向上传递,我们这里返回了true

const app = {
  name: "App",
  components: { AsyncShow, GirlShow },
  setup() {
    onErrorCaptured((error) => {
      console.log(`error====>`,error)
      return true  
    })
    return {};
  },
};

写好后,我们故意把请求地址写错,然后打开浏览器的终端,看一下控制台已经捕获到错误了。

处理异步请求错误

在实际工作中,你可以根据你的真实需求,处理这些错误。我这里就不做过多的演示啦。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P13:Suspense组件-深入学习 真实请求

发表评论

提供最优质的资源集合

立即查看 了解详情