Day 15：在生命周期呼喊 API

在铁人赛即将过半之际，终於要来串接 API 显示真实的书单资料了！不过在此之前，我们应该先来了解一下 Vue.js 的生命周期。

生命周期（Lifecycle）

每个 Vue 实例在被创建时都会经历一连串的初始化过程，这期间可能会需要设置 data、编译 <template> 内容、挂载实例、监听数据变化同步更新数据和画面等等；Vue.js 将这个过程拆分成四个主要阶段——created、mounted、updated、destroyed，另外还有在这四个阶段之前的前置阶段（beforeCreate、beforeMounted、beforeUpdated、beforeDestroyed），每个阶段都各有 hook function 可被调用。

完整的生命周期可以在实作中慢慢认识，本篇先单论 created 和 mounted 的区别：

• created：实例已创建，完成初始化资料
  • 已配置选项 data 、computed、methods、watch
  • HTML 尚未被渲染，尚未生成 DOM，因此若直接操作 DOM 节点会找不到元素
• mounted：实例已挂载，完成编译 <template> 内容
  • HTML 已渲染至页面上，此时可找到 DOM 节点并加以操作

何时发送 API？

Vue.js 官方本身有推荐可以使用 axios 来作为串接 API 的工具，并在文件中示范在 mounted 阶段发送 API。

不过，由於 created 为负责处理资料初始化的阶段，通常更适合在此阶段向後端 API 获取资料并将其设置为 data 属性，且串接 API 设置资料与操作 DOM 无关，因此可以不用等到 mounted 才执行，所以在以下范例会提前在 created 发送 API。

那麽先安装好 axios 之後，我们尝试在 All.vue 中取得所有书目资料，再利用模板语法整理出要显示的资料内容并稍加排版。（若想先测试是否能成功取得资料，也可以透过 <pre> 标签将 API 原始 JSON 格式内容显示在画面上进行初步确认）

• 本系列串接的书单 API 是在好想工作室中的天珑书目资料：https://bookshelf.goodideas-studio.com/api

<div class="All">
	<h1>All books</h1>
	<div class="bookshelf">
		<!-- <pre>{{ bookList }}</pre> -->
		<div class="book" v-for="book in bookList" :key="book.id">
			<img :src="book.image" alt="book image" />
			<p>
                原价：<span>{{ book.originPrice }}</span> ｜ 
			    特价：<span class="bargain">{{ book.sellPrice }}</span>
	        </p>
            <p>ISBN：<span>{{ book.ISBN }}</span></p>
            <p><span>{{ book.name }}</span></p>
			<a :href="book.link" target="_blank">连结</a>
	  </div>
	</div>
</div>

import axios from "axios";
export default {
  name: "All",
  data() {
    return {
      bookList: "",
    };
  },
  created() {
    axios
      .get("https://bookshelf.goodideas-studio.com/api")
      .then((response) => (this.bookList = response.data));
  },
};

先不论版面美丑，把资料串起来之後，看起来就煞有其事了吧！

数据获取

等到之後认识其他 Vue Router 的导航守卫（Navigation Guards），会发现其实还有其他可以发送 API 的时机点，当然一切仍需视情况而定，也可以思考专案想要给使用者什麽样的 UX 体验。

目前在 created 或 mounted 阶段都是属於在元件内的生命周期，两者的分水岭为 <template> 渲染成 HTML 的之前或之後；若是将判断时机改为透过路由控制，实现方式则可再分成要在完成导航之前或之後获取数据：

• 导航之前获取数据：在进入路由之前，先透过全域／路由／元件内的导航守卫发送 API

  导航守卫为异步执行，所以使用者会停留在当前页面，等数据获取完毕之後才会进入路由，此时可以在过渡期间显示进度条或相关指示，如遇数据获取失败也可弹出错误警示框以提升使用者体验。

• 导航之後获取数据：等进入路由之後，在 created 阶段发送 API

  生命周期的 Hook 为同步执行，所以固定内容会照常先进行渲染，使用者体验上就不会发生因为资料串接过程卡住或错误而产生全白画面的情况；而等待获取数据的期间还可以额外展示 loading 效果，让使用者可以辨识出部分区块内容是在等待资料串接的过程。

参考资料

• Chris - 好想工作室里的天珑书目(持续更新)
• Vue.js - Using Axios to Consume APIs
• Vue.js - The Vue Instance - Instance Lifecycle Hooks
• Vue Router - Data Fetching