VueUse useFetch 如何处理 JSON 数据？

terry 1周前 (05-02) 阅读数 36 #Vue

文章标签 JSON 数据

在 Vue.js 开发中，数据获取是常见的操作，VueUse 的 useFetch 提供了一种便捷的方式来处理数据请求，而 JSON 作为一种广泛使用的数据格式，在前端与后端交互中扮演着重要角色，VueUse 的 useFetch 具体是如何处理 JSON 数据的呢？

useFetch 的基本使用

我们需要了解 useFetch 的基本用法，在 Vue 项目中安装 VueUse 后，就可以引入 useFetch。

import { useFetch } from '@vueuse/core'

我们可以使用它来发起一个请求。

const { data, error, isFetching } = useFetch('https://example.com/api/data')

这里，data 就是请求返回的数据，在处理 JSON 数据时,它会自动进行解析吗？

JSON 数据的自动解析

在大多数情况下，当后端返回的是 JSON 格式的数据时，useFetch 会自动进行解析，这是因为现代浏览器的 fetch API 本身就对 JSON 有良好的支持，当服务器返回 Content - Type 为 application/json 的响应时，fetch 会自动将响应体解析为 JSON 对象，而 useFetch 基于 fetch 进行了封装，所以我们拿到的 data 就是解析后的 JSON 对象。

后端返回这样一个 JSON 数据：

{
    "name": "John",
    "age": 30,
    "hobbies": ["reading", "swimming"]
}

在 Vue 组件中，我们可以直接通过 data.value.name 来获取 John，data.value.age 获取 30 等。

处理非标准 JSON 响应

有时候后端返回的数据可能并不是严格符合 JSON 格式,或者我们需要对返回的数据进行一些额外的处理。

数据格式调整 如果后端返回的是一个字符串，但我们知道它实际上是一个 JSON 格式的字符串（比如由于某些特殊原因，没有正确设置 Content - Type）,我们可以手动进行解析。

const { data, error, isFetching } = useFetch('https://example.com/api/data')
data.value = JSON.parse(data.value)

数据过滤与转换 假设后端返回了一个包含大量冗余信息的 JSON 数据,我们只需要其中的一部分。

{
    "user": {
        "id": 1,
        "name": "Alice",
        "email": "alice@example.com",
        "extra_info": {
            "address": "123 Street",
            "phone": "123 - 456 - 7890"
        }
    },
    "status": "success"
}

我们只需要用户的 id、name 和 email，可以在获取到 data 后进行处理：

const { data, error, isFetching } = useFetch('https://example.com/api/user')
const processedData = {
    id: data.value.user.id,
    name: data.value.user.name,
    email: data.value.user.email
}
data.value = processedData

错误处理与 JSON 数据

在处理 JSON 数据时，错误处理也很重要，如果后端返回的不是有效的 JSON 数据（比如网络错误导致数据传输不完整），fetch 会抛出错误，useFetch 提供了 error 状态来捕获这些错误。

const { data, error, isFetching } = useFetch('https://example.com/api/data')
if (error.value) {
    console.log('Error fetching JSON data:', error.value.message)
    // 可以根据具体的错误信息进行相应处理，比如提示用户重新加载
}

有些后端可能会返回包含错误信息的 JSON 格式数据，

{
    "error": {
        "code": 404,
        "message": "Resource not found"
    }
}

我们可以在获取到 data 后，检查是否存在 error 字段,并进行相应处理：

const { data, error, isFetching } = useFetch('https://example.com/api/data')
if (data.value.error) {
    console.log('API error:', data.value.error.message)
    // 可以根据错误代码进行不同的 UI 提示，404 显示“页面未找到”
}

与其他 VueUse 组合式函数的配合

VueUse 提供了许多其他有用的组合式函数，我们可以将 useFetch 与它们配合使用来更好地处理 JSON 数据。

useStorage 如果我们希望将获取到的 JSON 数据存储在本地存储中（例如缓存数据），可以结合 useStorage。

import { useFetch } from '@vueuse/core'
import { useStorage } from '@vueuse/core'
const storageKey = 'cachedData'
const cachedData = useStorage(storageKey, null)
const { data, error, isFetching } = useFetch('https://example.com/api/data')
data.subscribe((newData) => {
    cachedData.value = newData
})

这样，每次获取到新的 JSON 数据时，都会自动存储到本地存储中，下次获取数据时,可以先检查本地存储是否有缓存数据。

useDebounceFn 当我们需要对搜索等操作进行数据请求（返回 JSON 数据），为了避免频繁请求，可以使用 useDebounceFn。

import { useFetch } from '@vueuse/core'
import { useDebounceFn } from '@vueuse/core'
const searchInput = ref('')
const debouncedSearch = useDebounceFn(async () => {
    const { data } = useFetch(`https://example.com/api/search?q=${searchInput.value}`)
    // 处理返回的 JSON 数据，比如更新搜索结果列表
}, 500)
// 在搜索输入变化时触发
watch(searchInput, debouncedSearch)

通过这种方式，只有在用户输入暂停一段时间（这里是 500 毫秒）后才会发起请求，减少了不必要的 JSON 数据获取。

实际项目中的应用场景

用户信息展示 在用户个人页面，使用 useFetch 获取用户的 JSON 格式信息（包含姓名、头像、简介等）,然后在页面上进行展示。

<template>
    <div v-if="!isFetching">
        <img :src="data.value.avatar" alt="User Avatar">
        <h2>{{ data.value.name }}</h2>
        <p>{{ data.value.bio }}</p>
    </div>
    <div v-else>Loading...</div>
</template>
<script>
import { useFetch } from '@vueuse/core'
export default {
    setup() {
        const { data, isFetching } = useFetch('https://example.com/api/user/1')
        return {
            data,
            isFetching
        }
    }
}
</script>

商品列表加载 在电商网站的商品列表页面，使用 useFetch 获取商品的 JSON 数据（包含商品名称、价格、库存等）,并渲染到页面上。

<template>
    <div v-for="product in data.value" :key="product.id">
        <h3>{{ product.name }}</h3>
        <p>Price: {{ product.price }}</p>
        <p>Stock: {{ product.stock }}</p>
    </div>
</template>
<script>
import { useFetch } from '@vueuse/core'
export default {
    setup() {
        const { data } = useFetch('https://example.com/api/products')
        return {
            data
        }
    }
}
</script>

VueUse 的 useFetch 在处理 JSON 数据时，借助浏览器 fetch API 的自动解析功能，为我们提供了便捷的方式，我们也可以根据实际需求，对非标准 JSON 响应进行手动解析、过滤和转换，处理各种错误情况，并与其他 VueUse 组合式函数配合，实现更丰富的功能，在实际项目中，无论是用户信息展示还是商品列表加载等场景，useFetch 处理 JSON 数据都能发挥重要作用，帮助我们构建高效、灵活的 Vue.js 应用，通过合理运用这些特性，我们可以更好地与后端 API 进行交互,提升用户体验。