feat: add axios as request lib (#14)

* ci: add axios request test

* fix: wrong node env

* fix: lint code and pass jest

* fix : fix some code style

* Update packages/website/src/api/character.ts

Co-authored-by: Qingyu Deng <i@ayase-lab.com>

* Update packages/website/src/api/character.ts

Co-authored-by: Qingyu Deng <i@ayase-lab.com>

* Update App.tsx

* style: remove api map

Co-authored-by: Qingyu Deng <i@ayase-lab.com>

packages/website/.env

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_ROOT=https://api.bgm.tv

packages/website/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

packages/website/src/App.tsx

@@ -1,9 +1,16 @@
-import React, { useState, FC } from 'react'
+import React, { useState, FC, useEffect } from 'react'
 import { Button } from '@bangumi/design'
 import style from './App.module.css'
-
+import { getCharacterDetail } from './api/character'
+import { CharacterDetail } from './types/common'
 const App: FC = () => {
   const [count, setCount] = useState(0)
+  const [detail, setDetail] = useState<CharacterDetail|null>(null)
+  useEffect(() => {
+    getCharacterDetail('39115').then(res => {
+      setDetail(res.data)
+    })
+  }, [])
   return (
     <div className={style.main}>
       <div className={style.count}>
@@ -16,6 +23,24 @@ const App: FC = () => {
         Increase
       </Button>
       <Button disabled>Disabled</Button>
+      { detail
+        ? <div>
+        <h1>{detail.name}</h1>
+            {
+              detail.infobox.map(el =>
+                <tr key={el.key}>
+                  <td>{el.key}</td>
+                  <tr>
+                    { Array.isArray(el.value)
+                      ? el.value.map(val => <p key={val.k}>{`${val.k}:${val.v}`}</p>)
+                      : el.value }
+                  </tr>
+                </tr>
+              )
+            }
+        <p>{detail.summary}</p>
+        </div>
+        : <div>loading</div>}
     </div>
   )
 }

packages/website/src/api/character.ts

@@ -0,0 +1,9 @@
+import { request } from './request'
+import { CharacterDetail } from '../types/common'
+import { AxiosPromise } from 'axios'
+
+type CharacterId = string;
+
+export const getCharacterDetail = (characterId:CharacterId):AxiosPromise<CharacterDetail> => {
+  return request(`/v0/characters/${characterId}`)
+}

packages/website/src/api/request.ts

@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+const baseURL = 'https://api.bgm.tv'
+export const request = axios.create({
+  // baseURL: import.meta.env.VITE_APP_ROOT as string,
+  // import.meta无法通过jest https://github.com/facebook/jest/issues/4842 可能需要改一下jest配置
+  baseURL,
+  timeout: 6000 // 请求超时时间
+})
+
+// 异常拦截处理器
+const errorHandler = (error:any) => {
+  console.log(error)
+
+  return Promise.reject(error)
+}
+
+request.interceptors.request.use(config => {
+  return config
+}, errorHandler)
+
+request.interceptors.response.use((response) => {
+  return response
+}, errorHandler)

packages/website/src/types/common.ts

@@ -0,0 +1,31 @@
+type infoBox = {
+  key:string,
+  value:string | {
+    k:string
+    v:string
+  }[]
+}[]
+
+export type CharacterDetail={
+  id: number
+  name: string
+  type: number
+  images: {
+    large: string
+    medium: string
+    small: string
+    grid: string
+  },
+  summary: string
+  locked: boolean
+  infobox: infoBox
+  gender: string
+  blooType: number
+  birthYear: number
+  birthMon: number
+  birthDay: number
+  stat: {
+    comments: number
+    collects: number
+  }
+}