這篇文章主要講解了“Vue 3的組合API怎么請(qǐng)求數(shù)據(jù)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue 3的組合API怎么請(qǐng)求數(shù)據(jù)”吧！

十載專(zhuān)注建站、設(shè)計(jì)、互聯(lián)網(wǎng)產(chǎn)品定制設(shè)計(jì)服務(wù)，業(yè)務(wù)涵蓋成都品牌網(wǎng)站建設(shè)、商城網(wǎng)站制作、微信小程序定制開(kāi)發(fā)、軟件系統(tǒng)開(kāi)發(fā)、重慶APP開(kāi)發(fā)公司等。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解每個(gè)客戶(hù)的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶(hù)設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)建站更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)，以推動(dòng)各中小企業(yè)全面信息數(shù)字化，并利用創(chuàng)新技術(shù)幫助各行業(yè)提升企業(yè)形象和運(yùn)營(yíng)效率。

項(xiàng)目初始化
為了快速啟動(dòng)一個(gè) Vue 3 項(xiàng)目，我們直接使用當(dāng)下最熱門(mén)的工具 Vite 來(lái)初始化項(xiàng)目。整個(gè)過(guò)程一氣呵成，行云流水。

npm init vite-app vue3-app

# 打開(kāi)生成的項(xiàng)目文件夾 cd vue3-app # 安裝依賴(lài) npm install # 啟動(dòng)項(xiàng)目 npm run dev

我們打開(kāi) App.vue 將生成的代碼先刪掉。

組合 API 的入口
接下來(lái)我們將通過(guò) Hacker News API 來(lái)獲取一些熱門(mén)文章，Hacker News API返回的數(shù)據(jù)結(jié)構(gòu)如下：

{   "hits": [     {       "objectID": "24518295",       "title": "Vue.js 3",       "url": "https://github.com/vuejs/vue-next/releases/tag/v3.0.0",     },     {...},     {...},   ] }

我們通過(guò) ui > li 將新聞列表展示到界面上，新聞數(shù)據(jù)從 hits 遍歷中獲取

在講解數(shù)據(jù)請(qǐng)求前，我看先看看 setup() 方法，組合 API 需要通過(guò) setup() 方法來(lái)啟動(dòng)，setup() 返回的數(shù)據(jù)可以在模板內(nèi)使用，可以簡(jiǎn)單理解為 Vue 2 里面 data() 方法返回的數(shù)據(jù)，不同的是，返回的數(shù)據(jù)需要先經(jīng)過(guò) reactive() 方法進(jìn)行包裹，將數(shù)據(jù)變成響應(yīng)式。

組合 API 中請(qǐng)求數(shù)據(jù)
在 Vue 2 中，我們請(qǐng)求數(shù)據(jù)時(shí)，通常需要將發(fā)起請(qǐng)求的代碼放到某個(gè)生命周期中（created 或 mounted）。在 setup() 方法內(nèi)，我們可以使用 Vue 3 提供的生命周期鉤子將請(qǐng)求放到特定生命周期內(nèi)，關(guān)于生命周期鉤子方法與之前生命周期的對(duì)比如下：

生命周期

可以看到，基本上就是在之前的方法名前加上了一個(gè) on，且并沒(méi)有提供 onCreated 的鉤子，因?yàn)樵?setup() 內(nèi)執(zhí)行就相當(dāng)于在 created 階段執(zhí)行。下面我們?cè)?mounted 階段來(lái)請(qǐng)求數(shù)據(jù)：

import { reactive, onMounted } from 'vue'  export default {   setup() {     const state = reactive({       hits: []     })     onMounted(async () => {       const data = await fetch(         'https://hn.algolia.com/api/v1/search?query=vue'       ).then(rsp => rsp.json())       state.hits = data.hits     })     return state   } }

最后效果如下：

監(jiān)聽(tīng)數(shù)據(jù)變動(dòng)
Hacker News 的查詢(xún)接口有一個(gè) query 參數(shù)，前面的案例中，我們將這個(gè)參數(shù)固定了，現(xiàn)在我們通過(guò)響應(yīng)式的數(shù)據(jù)來(lái)定義這個(gè)變量。

現(xiàn)在我們?cè)谳斎肟蛐薷?，就能觸發(fā) state.query 同步更新，但是并不會(huì)觸發(fā) fetch 重新調(diào)用，所以我們需要通過(guò) watchEffect() 來(lái)監(jiān)聽(tīng)響應(yīng)數(shù)據(jù)的變化。

import { reactive, onMounted, watchEffect } from 'vue'  export default {   setup() {     const state = reactive({       query: 'vue',       hits: []     })     const fetchData = async (query) => {       const data = await fetch(         `https://hn.algolia.com/api/v1/search?query=${query}`       ).then(rsp => rsp.json())       state.hits = data.hits     }     onMounted(() => {       fetchData(state.query)       watchEffect(() => {         fetchData(state.query)       })     })     return state   } }

由于 watchEffect() 首次調(diào)用的時(shí)候，其回調(diào)就會(huì)執(zhí)行一次，造成初始化時(shí)會(huì)請(qǐng)求兩次接口，所以我們需要把 onMounted 中的 fetchData 刪掉。

onMounted(() => { - fetchData(state.query)   watchEffect(() => {     fetchData(state.query)   }) })

watchEffect() 會(huì)監(jiān)聽(tīng)傳入函數(shù)內(nèi)所有的響應(yīng)式數(shù)據(jù)，一旦其中的某個(gè)數(shù)據(jù)發(fā)生變化，函數(shù)就會(huì)重新執(zhí)行。如果要取消監(jiān)聽(tīng)，可以調(diào)用 watchEffect() 的返回值，它的返回值為一個(gè)函數(shù)。下面舉個(gè)例子：

const stop = watchEffect(() => {   if (state.query === 'vue3') {     // 當(dāng) query 為 vue3 時(shí)，停止監(jiān)聽(tīng)     stop()   }   fetchData(state.query) })

當(dāng)我們?cè)谳斎肟蜉斎?"vue3" 后，就不會(huì)再發(fā)起請(qǐng)求了。

返回事件方法
現(xiàn)在有個(gè)問(wèn)題就是 input 內(nèi)的值每次修改都會(huì)觸發(fā)一次請(qǐng)求，我們可以增加一個(gè)按鈕，點(diǎn)擊按鈕后再觸發(fā) state.query 的更新。

可以注意到 button 綁定的 click 事件的方法，也是通過(guò) setup() 方法返回的，我們可以將 setup() 方法返回值理解為 Vue2 中 data() 方法和 methods 對(duì)象的合并。

原先的返回值 state 變成了現(xiàn)在返回值的一個(gè)屬性，所以我們?cè)谀０鍖尤?shù)據(jù)的時(shí)候，需要進(jìn)行一些修改，在前面加上 state.。

返回?cái)?shù)據(jù)修改
作為強(qiáng)迫癥患者，在模板層通過(guò) state.xxx 的方式獲取數(shù)據(jù)實(shí)在是難受，那我們是不是可以通過(guò)對(duì)象解構(gòu)的方式將 state 的數(shù)據(jù)返回呢？

答案是『不可以』。修改代碼后，可以看到頁(yè)面雖然發(fā)起了請(qǐng)求，但是頁(yè)面并沒(méi)有展示數(shù)據(jù)。

state 在解構(gòu)后，數(shù)據(jù)就變成了靜態(tài)數(shù)據(jù)，不能再被跟蹤，返回值類(lèi)似于：

export default {   setup(props, ctx) {     // 省略部分代碼...     return {       input: 'vue',       query: 'vue',       hits: [],       setQuery,     }   } }

為了跟蹤基礎(chǔ)類(lèi)型的數(shù)據(jù)（即非對(duì)象數(shù)據(jù)），Vue3 也提出了解決方案：ref() 。

import { ref } from 'vue'  const count = ref(0) console.log(count.value) // 0  count.value++ console.log(count.value) // 1

上面為 Vue 3 的官方案例，ref() 方法返回的是一個(gè)對(duì)象，無(wú)論是修改還是獲取，都需要取返回對(duì)象的 value 屬性。

我們將 state 從響應(yīng)對(duì)象改為一個(gè)普通對(duì)象，然后所有屬性都使用 ref 包裹，這樣修改后，后續(xù)的解構(gòu)才做才能生效。這樣的弊端就是，state 的每個(gè)屬性在修改時(shí)，都必須取其 value 屬性。但是在模板中不需要追加 .value，Vue 3 內(nèi)部有對(duì)其進(jìn)行處理。

import { ref, onMounted, watchEffect } from 'vue' export default {   setup() {     const state = {       input: ref('vue'),       query: ref('vue'),       hits: ref([])     }     const fetchData = async (query) => {       const data = await fetch(         `https://hn.algolia.com/api/v1/search?query=${query}`       ).then(rsp => rsp.json())       state.hits.value = data.hits     }     onMounted(() => {       watchEffect(() => {         fetchData(state.query.value)       })     })     const setQuery = () => {       state.query.value = state.input.value     }     return {       ...state,       setQuery,     }   } }

有沒(méi)有辦法保持 state 為響應(yīng)對(duì)象，同時(shí)又支持其對(duì)象解構(gòu)的呢？當(dāng)然是有的，Vue 3 也提供了解決方案：toRefs() 。toRefs() 方法可以將一個(gè)響應(yīng)對(duì)象變?yōu)槠胀▽?duì)象，并且給每個(gè)屬性加上 ref()。

import { toRefs, reactive, onMounted, watchEffect } from 'vue'  export default {   setup() {     const state = reactive({       input: 'vue',       query: 'vue',       hits: []     })     const fetchData = async (query) => {       const data = await fetch(         `https://hn.algolia.com/api/v1/search?query=${query}`       ).then(rsp => rsp.json())       state.hits = data.hits     }     onMounted(() => {       watchEffect(() => {         fetchData(state.query)       })     })     const setQuery = () => {       state.query = state.input     }     return {       ...toRefs(state),       setQuery,     }   } }

Loading 與 Error 狀態(tài)
通常，我們發(fā)起請(qǐng)求的時(shí)候，需要為請(qǐng)求添加 Loading 和 Error 狀態(tài)，我們只需要在 state 中添加兩個(gè)變量來(lái)控制這兩種狀態(tài)即可。

export default {   setup() {     const state = reactive({       input: 'vue',       query: 'vue',       hits: [],       error: false,       loading: false,     })     const fetchData = async (query) => {       state.error = false       state.loading = true       try {         const data = await fetch(           `https://hn.algolia.com/api/v1/search?query=${query}`         ).then(rsp => rsp.json())         state.hits = data.hits       } catch {         state.error = true       }       state.loading = false     }     onMounted(() => {       watchEffect(() => {         fetchData(state.query)       })     })     const setQuery = () => {       state.query = state.input     }     return {       ...toRefs(state),       setQuery,     }   } }

同時(shí)在模板使用這兩個(gè)變量：

展示 Loading、Error 狀態(tài)：

將數(shù)據(jù)請(qǐng)求邏輯抽象
用過(guò) umi 的同學(xué)肯定知道 umi 提供了一個(gè)叫做 useRequest 的 Hooks，用于請(qǐng)求數(shù)據(jù)非常的方便，那么我們通過(guò) Vue 的組合 API 也可以抽象出一個(gè)類(lèi)似于 useRequest 的公共方法。

接下來(lái)我們新建一個(gè)文件 useRequest.js ：

import {   toRefs,   reactive, } from 'vue'  export default (options) => {   const { url } = options   const state = reactive({     data: {},     error: false,     loading: false,   })    const run = async () => {     state.error = false     state.loading = true     try {       const result = await fetch(url).then(res => res.json())       state.data = result     } catch(e) {       state.error = true     }     state.loading = false   }    return {     run,     ...toRefs(state)   } }

然后在 App.vue 中引入：

當(dāng)前的 useRequest 還有兩個(gè)缺陷：

傳入的 url 是固定的，query 修改后，不能及時(shí)的反應(yīng)到 url 上；
不能自動(dòng)請(qǐng)求，需要手動(dòng)調(diào)用一下 run 方法；

import {   isRef,   toRefs,   reactive,   onMounted, } from 'vue'  export default (options) => {   const { url, manual = false, params = {} } = options    const state = reactive({     data: {},     error: false,     loading: false,   })    const run = async () => {     // 拼接查詢(xún)參數(shù)     let query = ''     Object.keys(params).forEach(key => {       const val = params[key]       // 如果去 ref 對(duì)象，需要取 .value 屬性       const value = isRef(val) ? val.value : val       query += `${key}=${value}&`     })     state.error = false     state.loading = true     try {       const result = await fetch(`${url}?${query}`)        .then(res => res.json())       state.data = result     } catch(e) {       state.error = true     }     state.loading = false   }    onMounted(() => {     // 第一次是否需要手動(dòng)調(diào)用     !manual && run()   })    return {     run,     ...toRefs(state)   } }

經(jīng)過(guò)修改后，我們的邏輯就變得異常簡(jiǎn)單了。

import useRequest from './useRequest'  export default {   setup() {     const query = ref('vue')     const { data, loading, error, run } = useRequest(       {         url: 'https://hn.algolia.com/api/v1/search',         params: {           query         }       }     )     return {       data,       query,       error,       loading,       search: run,     }   } }

感謝各位的閱讀，以上就是“Vue 3的組合API怎么請(qǐng)求數(shù)據(jù)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue 3的組合API怎么請(qǐng)求數(shù)據(jù)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！