[{"data":1,"prerenderedAt":193},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fnuxt3-useasyncdata-vs-usefetch":3,"surround:\u002Fposts\u002F2024\u002Fnuxt3-useasyncdata-vs-usefetch":182},{"id":4,"title":5,"body":6,"canonical":157,"categories":158,"date":160,"description":161,"draft":162,"extension":163,"image":164,"meta":165,"navigation":166,"path":167,"permalink":157,"readingTime":168,"recommend":157,"references":173,"seo":177,"sitemap":178,"stem":179,"tags":180,"type":157,"updated":160,"__hash__":181},"content\u002Fposts\u002F2024\u002Fnuxt3-useAsyncData-vs-useFetch.md","Nuxt3 useAsyncData vs useFetch",{"type":7,"value":8,"toc":149},"minimark",[9,13,18,21,32,35,41,44,50,53,61,67,77,81,84,90,93,99,103,106,112,115,121,124,137,140],[10,11,12],"p",{},"nuxt 为我们提供了 useFetch 和 useAsyncData 我们应该用哪个呢？",[14,15,17],"h2",{"id":16},"如何在数据变化后自动重新加载数据","如何在数据变化后自动重新加载数据？",[10,19,20],{},"在使用 useFetch 时，需要在数据变化后自动请求数据的时候，我们不应该在参数中进行解包",[22,23,29],"pre",{"className":24,"code":26,"language":27,"meta":28},[25],"language-html","\u003Cscript lang=\"ts\" setup>\n  const page = ref(1)\n  const { data } = await useFetch(\"\u002Fapi\u002Fresult\", {\n    query: {\n      page: page.value,\n    },\n    method: \"POST\",\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"page++\">更改分页\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","html","",[30,31,26],"code",{"__ignoreMap":28},[10,33,34],{},"上面这段代码相当于下面这段代码，在 page 变化时不会自动进行数据的重新加载。",[22,36,39],{"className":37,"code":38,"language":27,"meta":28},[25],"\u003Cscript lang=\"ts\" setup>\n  const page = ref(1)\n  const { data } = await useFetch(\"\u002Fapi\u002Fresult\", {\n    query: {\n      page: 1,\n    },\n    method: \"POST\",\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"page++\">更改分页\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[30,40,38],{"__ignoreMap":28},[10,42,43],{},"我们我们如果需要在 page 变化时重新调用接口，我们不需要对 page 进行解包",[22,45,48],{"className":46,"code":47,"language":27,"meta":28},[25],"\u003Cscript lang=\"ts\" setup>\n  const page = ref(1)\n  const { data } = await useFetch(\"\u002Fapi\u002Fresult\", {\n    query: {\n      page: page,\n    },\n    method: \"POST\",\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"page++\">更改分页\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[30,49,47],{"__ignoreMap":28},[10,51,52],{},"下面两段代码实现的效果是一致的，会在在 page 变化时重新请求数据",[22,54,59],{"className":55,"code":57,"language":58,"meta":28},[56],"language-js","const page = ref(1)\nconst { data } = await useFetch(\"\u002Fapi\u002Fresult\", {\n    query: {\n        page,\n    },\n    method: \"POST\",\n})\n","js",[30,60,57],{"__ignoreMap":28},[22,62,65],{"className":63,"code":64,"language":58,"meta":28},[56],"const page = ref(1)\nconst { data } = await useAsyncData(\"result\", async () =>\n    $fetch(\n        \"\u002Fapi\u002Fresult\",\n        {\n            query: {\n                page: page.value,\n            },\n            method: \"POST\",\n        },\n        {\n            watch: [page],\n        }\n    )\n)\n",[30,66,64],{"__ignoreMap":28},[10,68,69,72,73,76],{},[30,70,71],{"code":71},"useFetch"," 近似等同于 ",[30,74,75],{"code":75},"useAsyncData"," + `$fetch",[14,78,80],{"id":79},"什么时候会用到-useasyncdata","什么时候会用到 useAsyncData？",[10,82,83],{},"我们需要一次请求多个数据，比如我们需要请求用户信息和文章列表，我们可以使用 useAsyncData 来实现",[22,85,88],{"className":86,"code":87,"language":58,"meta":28},[56],"const { userInfo } = await useAsyncData(\"userInfo\", async () => {\n    const [user, articles] = await Promise.all([$fetch(\"\u002Fapi\u002Fuser\"), $fetch(\"\u002Fapi\u002Farticles\")])\n\n    return {\n        user,\n        articles,\n    }\n})\n",[30,89,87],{"__ignoreMap":28},[10,91,92],{},"或者我们会有一些其他的第三方提供好的接口和方法，我们也可以使用 useAsyncData 来实现",[22,94,97],{"className":95,"code":96,"language":58,"meta":28},[56],"\u002F\u002F 这里模拟第三方提供好的请求方法\nimport { fetchData } from \"other-api\"\n\nconst { data } = await useAsyncData(\"otherData\", async () => {\n    const result = await fetchData()\n    return result\n})\n",[30,98,96],{"__ignoreMap":28},[14,100,102],{"id":101},"useasyncdata-和-usefetch-对返回值的处理","useAsyncData 和 useFetch 对返回值的处理",[10,104,105],{},"有时我们需要的数据只是接口返回值的一部分，那么我们可以使用 transform 属性来处理返回值",[22,107,110],{"className":108,"code":109,"language":58,"meta":28},[56],"const { data } = await useAsyncData(\"result\", () => $fetch(\"\u002Fapi\u002Fresult\"), {\n    transform: (data) => {\n    \u002F\u002F 在这里处理返回值\n        return {\n            id: data.id,\n            name: data.name,\n        }\n    },\n})\n",[30,111,109],{"__ignoreMap":28},[10,113,114],{},"如果返回值是多个数据，也可以使用 transform 函数来处理",[22,116,119],{"className":117,"code":118,"language":58,"meta":28},[56],"const { userInfo } = await useAsyncData(\n    \"userInfo\",\n    async () => {\n        const [user, articles] = await Promise.all([$fetch(\"\u002Fapi\u002Fuser\"), $fetch(\"\u002Fapi\u002Farticles\")])\n\n        return {\n            user,\n            articles,\n        }\n    },\n    {\n        transform: (data) => {\n            return {\n                user: {\n                    username: data.user.username,\n                    email: data.user.email,\n                },\n                articles: data.articles.map(article => ({\n                    title: article.title,\n                    content: article.content,\n                })),\n            }\n        },\n    }\n)\n",[30,120,118],{"__ignoreMap":28},[14,122,123],{"id":123},"结论",[125,126,127,131,134],"ul",{},[128,129,130],"li",{},"$fetch 没有响应性",[128,132,133],{},"useAsyncData 可以配置 watch 属性在某些字段变更时具备响应性",[128,135,136],{},"useFetch 可以自动扫描方法内的响应式数据，并在数据变更时重新加载数据",[10,138,139],{},"我们一般情况下使用 useFetch，useFetch 为我们提供的自动重新加载数据会有更好的 DX，我们不在需要手动处理什么时候重新加载数据，只要保证参数中的数据是响应式的即可；如果你有特殊的情况，可以使用 useAsyncData 自己处理一些数据，而且结合 useAsyncData 提供的一些属性比如 watch 也可以尽可能的更加友好的处理一些数据的自动重新加载；$fetch 来自于 ofetch 它更像是 axios 之类 HTTP 请求库，需要手动对每次请求做出判断。",[10,141,142],{},[143,144,145,146],"strong",{},"如果实在服务端使用，那么就只能使用 ",[30,147,148],{"code":148},"$fetch",{"title":28,"searchDepth":150,"depth":150,"links":151},4,[152,154,155,156],{"id":16,"depth":153,"text":17},2,{"id":79,"depth":153,"text":80},{"id":101,"depth":153,"text":102},{"id":123,"depth":153,"text":123},null,[159],"代码","2024-06-10 22:15:04","我们该使用那个呢 🧐？",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad7be69f3c-78.webp",{},true,"\u002Fposts\u002F2024\u002Fnuxt3-useasyncdata-vs-usefetch",{"text":169,"minutes":170,"time":171,"words":172},"5 min read",4.215,252900,843,[174],{"title":175,"link":176},"useAsyncData vs. useFetch 🤯","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=0X-aOpSGabA",{"title":5,"description":161},{"loc":167},"posts\u002F2024\u002Fnuxt3-useAsyncData-vs-useFetch",[],"LFPqi9nBm-jBgOPGPjGyYCetY035n3VR4sbiWvboIZk",[183,188],{"title":184,"path":185,"stem":186,"date":187,"type":157,"children":-1},"code review 黑话摘录","\u002Fposts\u002F2024\u002Fcode-review-short-code","posts\u002F2024\u002Fcode-review-short-code","2024-06-08 22:22:49",{"title":189,"path":190,"stem":191,"date":192,"type":157,"children":-1},"Nuxt3 获取静态图片公用方法","\u002Fposts\u002F2024\u002Fnuxt3-get-assets-dir-image-function","posts\u002F2024\u002Fnuxt3-get-assets-dir-image-function","2024-06-20 21:29:45",1789642591800]