feat: add fetch example

Author: cwandev

.env

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE=https://easyapi.devv.zone

.gitignore

@@ -17,8 +17,3 @@ logs
 .DS_Store
 .fleet
 .idea
-
-# Local env files
-.env
-.env.*
-!.env.example

app/api/http.ts

@@ -0,0 +1,55 @@
+import type { $Fetch } from 'ofetch'
+
+import { useRuntimeConfig } from '#app'
+import { ofetch } from 'ofetch'
+
+type HttpStatusErrorHandler = (message: string, statusCode: number) => void
+let httpStatusErrorHandler: HttpStatusErrorHandler
+
+let http: $Fetch
+
+export function setupHttp() {
+  if (http)
+    return http
+
+  const config = useRuntimeConfig()
+  const baseURL = config.public.apiBase as string
+
+  http = ofetch.create({
+    baseURL,
+    headers: { 'Content-Type': 'application/json' },
+    async onRequest({ options }) {
+      const token = localStorage.getItem('token')
+
+      options.headers = {
+        ...options.headers,
+        ...(token && { Authorization: `Bearer ${token}` }),
+      }
+    },
+    async onResponseError({ response }) {
+      const { message } = response._data
+      if (Array.isArray(message)) {
+        message.forEach((item) => {
+          httpStatusErrorHandler?.(item, response.status)
+        })
+      }
+      else {
+        httpStatusErrorHandler?.(message, response.status)
+      }
+      return Promise.reject(response._data)
+    },
+    retry: 3,
+    retryDelay: 1000,
+  })
+}
+
+export function injectHttpStatusErrorHandler(handler: HttpStatusErrorHandler) {
+  httpStatusErrorHandler = handler
+}
+
+export function getHttp() {
+  if (!http) {
+    throw new Error('HTTP client not initialized. Call setupHttp first.')
+  }
+  return http
+}

app/api/prose.ts

@@ -0,0 +1,8 @@
+import { getHttp } from './http'
+
+export async function getProse() {
+  const http = getHttp()
+  return await http('/api/prose', {
+    method: 'GET',
+  })
+}

app/pages/index.vue

@@ -40,6 +40,7 @@ const menus = computed(() => [
   { title: t('menu.unocssExample'), route: 'unocss' },
   { title: t('menu.keepAlive'), route: 'keepalive' },
   { title: t('menu.persistPiniaState'), route: 'counter' },
+  { title: t('menu.fetch'), route: 'prose' },
   { title: t('menu.404Demo'), route: 'unknown' },
 ])
 

app/pages/prose/index.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { useProseStore } from '~/stores/prose'
+
+definePageMeta({
+  layout: 'default',
+  title: '随笔',
+  i18n: 'menu.fetch',
+})
+
+const proseStore = useProseStore()
+
+async function fetchData() {
+  await proseStore.fetchProse()
+}
+
+fetchData()
+</script>
+
+<template>
+  <div>
+    {{ proseStore.prose }}
+  </div>
+</template>

app/plugins/http.ts

@@ -0,0 +1,5 @@
+import { setupHttp } from '~/api/http'
+
+export default defineNuxtPlugin(() => {
+  setupHttp()
+})

app/stores/prose.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { getProse } from '~/api/prose'
+
+export const useProseStore = defineStore(
+  'prose',
+  () => {
+    const prose = ref<string>('')
+
+    function initProse(val: string) {
+      if (!prose.value) {
+        prose.value = ''
+      }
+
+      prose.value = val
+    }
+
+    function clearProse() {
+      prose.value = ''
+    }
+
+    async function fetchProse() {
+      const res = await getProse()
+      initProse(res.result)
+    }
+
+    return {
+      prose,
+      initProse,
+      clearProse,
+      fetchProse,
+    }
+  },
+)

i18n/locales/en-US.json

@@ -7,7 +7,8 @@
     "404Demo": "🙅 Page 404 Demo",
     "unocssExample": "🎨 Unocss example",
     "keepAlive": "🧡 KeepAlive Demo",
-    "persistPiniaState": "💾 Persist Pinia State"
+    "persistPiniaState": "💾 Persist Pinia State",
+    "fetch": "🌐 Network Request"
   },
   "tabbar": {
     "home": "Home",

i18n/locales/zh-CN.json

@@ -7,7 +7,8 @@
     "404Demo": "🙅 404页 演示",
     "unocssExample": "🎨 Unocss 示例",
     "keepAlive": "🧡 KeepAlive 演示",
-    "persistPiniaState": "💾 持久化 Pinia 状态"
+    "persistPiniaState": "💾 持久化 Pinia 状态",
+    "fetch": "🌐 网络请求"
   },
   "tabbar": {
     "home": "主页",