乐趣区

关于前端:Vue-3-的组合-API-如何请求数据

jiezi

前言

之前在学习 React Hooks 的过程中，看到一篇外网文章，通过 Hooks 来申请数据，并将这段逻辑形象成一个新的 Hooks 给其余组件复用，我也在我的博客里翻译了一下：《在 React Hooks 中如何申请数据？》，感兴趣能够看看。尽管是去年的文章，在浏览之后一下子就把握了 Hooks 的应用形式，而且数据申请是在业务代码中很罕用的逻辑。

Vue 3 曾经公布一段时间了，其组合 API 多少有点 React Hooks 的影子在外面，明天我也打算通过这种形式来学习下组合 API。

我的项目初始化

为了疾速启动一个 Vue 3 我的项目，咱们间接应用当下最热门的工具 Vite 来初始化我的项目。整个过程零打碎敲，行云流水。

npm init vite-app vue3-app
# 关上生成的我的项目文件夹
cd vue3-app
# 装置依赖
npm install
# 启动我的项目
npm run dev

咱们关上 App.vue 将生成的代码先删掉。

组合 API 的入口

接下来咱们将通过 Hacker News API 来获取一些热门文章，Hacker News API 返回的数据结构如下：

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

咱们通过 ui > li 将新闻列表展现到界面上，新闻数据从 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>

在解说数据申请前，我看先看看 setup() 办法，组合 API 须要通过 setup() 办法来启动，setup() 返回的数据能够在模板内应用，能够简略了解为 Vue 2 外面 data() 办法返回的数据，不同的是，返回的数据须要先通过 reactive() 办法进行包裹，将数据变成响应式。

组合 API 中申请数据

在 Vue 2 中，咱们申请数据时，通常须要将发动申请的代码放到某个生命周期中（created 或 mounted）。在 setup() 办法内，咱们能够应用 Vue 3 提供的生命周期钩子将申请放到特定生命周期内，对于生命周期钩子办法与之前生命周期的比照如下：

能够看到，基本上就是在之前的办法名前加上了一个 on，且并没有提供 onCreated 的钩子，因为在 setup() 内执行就相当于在 created 阶段执行。上面咱们在 mounted 阶段来申请数据：

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
  }
}

最初成果如下：

监听数据变动

Hacker News 的查问接口有一个 query 参数，后面的案例中，咱们将这个参数固定了，当初咱们通过响应式的数据来定义这个变量。

<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>

当初咱们在输入框批改，就能触发 state.query 同步更新，然而并不会触发 fetch 从新调用，所以咱们须要通过 watchEffect() 来监听响应数据的变动。

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() 首次调用的时候，其回调就会执行一次，造成初始化时会申请两次接口，所以咱们须要把 onMounted 中的 fetchData 删掉。

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

watchEffect() 会监听传入函数内所有的响应式数据，一旦其中的某个数据发生变化，函数就会从新执行。如果要勾销监听，能够调用 watchEffect() 的返回值，它的返回值为一个函数。上面举个例子：

const stop = watchEffect(() => {if (state.query === 'vue3') {
    // 当 query 为 vue3 时，进行监听
    stop()}
  fetchData(state.query)
})

当咱们在输入框输出 "vue3" 后，就不会再发动申请了。

返回事件办法

当初有个问题就是 input 内的值每次批改都会触发一次申请，咱们能够减少一个按钮，点击按钮后再触发 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 对象的合并。

原先的返回值 state 变成了当初返回值的一个属性，所以咱们在模板层取数据的时候，须要进行一些批改，在后面加上 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>

返回数据批改

作为强迫症患者，在模板层通过 state.xxx 的形式获取数据切实是好受，那咱们是不是能够通过对象解构的形式将 state 的数据返回呢？

<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>

答案是『不能够』。批改代码后，能够看到页面尽管发动了申请，然而页面并没有展现数据。

state 在解构后，数据就变成了静态数据，不能再被跟踪，返回值相似于：

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

为了跟踪根底类型的数据（即非对象数据），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() 办法返回的是一个对象，无论是批改还是获取，都须要取返回对象的 value 属性。

咱们将 state 从响应对象改为一个一般对象，而后所有属性都应用 ref 包裹，这样批改后，后续的解构才做能力失效。这样的弊病就是，state 的每个属性在批改时，都必须取其 value 属性。然而在模板中不须要追加 .value，Vue 3 外部有对其进行解决。

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 为响应对象，同时又反对其对象解构的呢？当然是有的，Vue 3 也提供了解决方案：toRefs()。toRefs() 办法能够将一个响应对象变为一般对象，并且给每个属性加上 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 状态

通常，咱们发动申请的时候，须要为申请增加 Loading 和 Error 状态，咱们只须要在 state 中增加两个变量来管制这两种状态即可。

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,
    }
  }
}

同时在模板应用这两个变量：

<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 状态：

将数据申请逻辑形象

用过 umi 的同学必定晓得 umi 提供了一个叫做 useRequest 的 Hooks，用于申请数据十分的不便，那么咱们通过 Vue 的组合 API 也能够形象出一个相似于 useRequest 的公共办法。

接下来咱们新建一个文件 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>

以后的 useRequest 还有两个缺点：

  1. 传入的 url 是固定的，query 批改后，不能及时的反馈到 url 上；
  2. 不能主动申请，须要手动调用一下 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 () => {
    // 拼接查问参数
    let query = ''
    Object.keys(params).forEach(key => {const val = params[key]
      // 如果去 ref 对象，须要取 .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(() => {
    // 第一次是否须要手动调用
    !manual && run()})

  return {
    run,
    ...toRefs(state)
  }
}

通过批改后，咱们的逻辑就变得异样简略了。

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,
    }
  }
}

当然，这个 useRequest 还有很多能够欠缺的中央，例如：不反对 http 办法批改、不反对节流防抖、不反对超时工夫等等。最初，心愿大家看完文章后能有所播种。

退出移动版