[[347283]]

前言
之前在學(xué)習(xí) React Hooks 的過程中，看到一篇外網(wǎng)文章，通過 Hooks 來請(qǐng)求數(shù)據(jù)，并將這段邏輯抽象成一個(gè)新的 Hooks 給其他組件復(fù)用，我也在我的博客里翻譯了一下：《在 React Hooks 中如何請(qǐng)求數(shù)據(jù)？》，感興趣可以看看。雖然是去年的文章，在閱讀之后一下子就掌握了 Hooks 的使用方式，而且數(shù)據(jù)請(qǐng)求是在業(yè)務(wù)代碼中很常用的邏輯。

Vue 3 已經(jīng)發(fā)布一段時(shí)間了，其組合 API 多少有點(diǎn) React Hooks 的影子在里面，今天我也打算通過這種方式來學(xué)習(xí)下組合 API。

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

npm init vite-app vue3-app 

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

我們打開 App.vue 將生成的代碼先刪掉。

組合 API 的入口
接下來我們將通過 Hacker News API 來獲取一些熱門文章，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", 
    }, 
    {...}, 
    {...}, 
  ] 
} 

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

<template> 
  <ul> 
    <li 
      v-for="item of hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 
 
<script> 
import { reactive } from 'vue' 
 
export default { 
  setup() { 
    const state = reactive({ 
      hits: [] 
    }) 
    return state 
  } 
} 
</script> 

在講解數(shù)據(jù)請(qǐng)求前，我看先看看 setup() 方法，組合 API 需要通過 setup() 方法來啟動(dòng)，setup() 返回的數(shù)據(jù)可以在模板內(nèi)使用，可以簡(jiǎn)單理解為 Vue 2 里面 data() 方法返回的數(shù)據(jù)，不同的是，返回的數(shù)據(jù)需要先經(jīng)過 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，且并沒有提供 onCreated 的鉤子，因?yàn)樵?setup() 內(nèi)執(zhí)行就相當(dāng)于在 created 階段執(zhí)行。下面我們?cè)?mounted 階段來請(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)聽數(shù)據(jù)變動(dòng)
Hacker News 的查詢接口有一個(gè) query 參數(shù)，前面的案例中，我們將這個(gè)參數(shù)固定了，現(xiàn)在我們通過響應(yīng)式的數(shù)據(jù)來定義這個(gè)變量。

<template> 
  <input type="text" v-model="query" /> 
  <ul> 
    <li 
      v-for="item of hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 
 
<script> 
import { reactive, onMounted } from 'vue' 
 
export default { 
  setup() { 
    const state = reactive({ 
      query: 'vue', 
      hits: [] 
    }) 
    onMounted((async () => { 
      const data = await fetch( 
        `https://hn.algolia.com/api/v1/search?query=${state.query}` 
      ).then(rsp => rsp.json()) 
      state.hits = data.hits 
    }) 
    return state 
  } 
} 
</script> 

現(xiàn)在我們?cè)谳斎肟蛐薷?，就能觸發(fā) state.query 同步更新，但是并不會(huì)觸發(fā) fetch 重新調(diào)用，所以我們需要通過 watchEffect() 來監(jiān)聽響應(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)聽傳入函數(shù)內(nèi)所有的響應(yīng)式數(shù)據(jù)，一旦其中的某個(gè)數(shù)據(jù)發(fā)生變化，函數(shù)就會(huì)重新執(zhí)行。如果要取消監(jiān)聽，可以調(diào)用 watchEffect() 的返回值，它的返回值為一個(gè)函數(shù)。下面舉個(gè)例子：

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

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

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

<template> 
  <input type="text" v-model="input" /> 
  <button @click="setQuery">搜索</button> 
  <ul> 
    <li 
      v-for="item of hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 
 
<script> 
import { 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 { setQuery, state } 
  } 
} 
</script> 

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

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

<template> 
  <input type="text" v-model="state.input" /> 
  <button @click="setQuery">搜索</button> 
  <ul> 
    <li 
      v-for="item of state.hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 

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

<template> 
  <input type="text" v-model="input" /> 
  <button class="search-btn" @click="setQuery">搜索</button> 
  <ul class="results"> 
    <li 
      v-for="item of hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 
 
<script> 
import { reactive, onMounted, watchEffect } from 'vue' 
 
export default { 
  setup(props, ctx) { 
    const state = reactive({ 
      input: 'vue', 
      query: 'vue', 
      hits: [] 
    }) 
    // 省略部分代碼... 
    return { 
      ...state, 
      setQuery, 
    } 
  } 
} 
</script> 

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

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

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

為了跟蹤基礎(chǔ)類型的數(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ì)象，無論是修改還是獲取，都需要取返回對(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, 
    } 
  } 
} 

有沒有辦法保持 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è)變量來控制這兩種狀態(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è)變量：

<template> 
  <input type="text" v-model="input" /> 
  <button @click="setQuery">搜索</button> 
  <div v-if="loading">Loading ...</div> 
  <div v-else-if="error">Something went wrong ...</div> 
  <ul v-else> 
    <li 
      v-for="item of hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 

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

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

接下來我們新建一個(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 中引入：

<template> 
  <input type="text" v-model="query" /> 
  <button @click="search">搜索</button> 
  <div v-if="loading">Loading ...</div> 
  <div v-else-if="error">Something went wrong ...</div> 
  <ul v-else> 
    <li 
      v-for="item of data.hits" 
      :key="item.objectID" 
    > 
      <a :href="item.url">{{item.title}}</a> 
    </li> 
  </ul> 
</template> 
 
<script> 
import { ref, onMounted } from 'vue' 
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' 
    }) 
    onMounted(() => { 
      run() 
    }) 
    return { 
      data, 
      query, 
      error, 
      loading, 
      search: run, 
    } 
  } 
} 
</script> 

當(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 () => { 
    // 拼接查詢參數(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)過修改后，我們的邏輯就變得異常簡(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, 
    } 
  } 
} 

當(dāng)然，這個(gè) useRequest 還有很多可以完善的地方，例如：不支持 http 方法修改、不支持節(jié)流防抖、不支持超時(shí)時(shí)間等等。最后，希望大家看完文章后能有所收獲。