«

Vite中怎么自制mock服务器

时间:2024-6-16 06:33     作者:韩俊     分类: Linux


本篇内容主要讲解“Vite中怎么自制mock服务器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vite中怎么自制mock服务器”吧!

起步

本篇文章会使用到

swr
axios
vite-plugin-mock
,请自行安装

配置

vite
进入
vite.config.ts
,添加以下代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => ({
  plugins: [
    react(),
    viteMockServe()
  ],
}))

创建

mock
数据

    创建

    mock/test.ts
    文件

mkdir mock/ && touch mock/test.ts

    添加 mock 数据

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/v1/me',
    method: 'get',
    response: () => {
      return {
        id: 1,
        name: 'Niki'
      }
    }
  }
] as MockMethod[]

使用

useSWR

在使用到的组件中用:

import useSWR from 'swr'
import axios from 'axios'

export const Home: React.FC = () => {
  const { data, error, isLoading } = useSWR('/api/v1/me', path => {
    return axios.get(path)
  })

  if (isLoading) {
    return <div>加载中...</div>
  }
  if (error) {
    return <div>加载失败</div>
  }

  return (
    <div>Hi, I am {data.name}!</div>
  )
}

判断是否在开发环境

vite.config.ts
里添加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => ({
+ define: {
+   isDev: command === 'serve' // 它会写在 window.isDev = true / false
+ },
  plugins: [
    react(),
    viteMockServe()
  ],
}))

封装请求

这里只是简单的封装一下

Axios

mkdir src/lib/ touch src/lib/ajax.tsx
import axios from 'axios'

axios.defaults.baseURL = isDev ? '/' : 'xxx' // 'xxx' 改为线上的 ip:端口
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000

export const ajax = {
  get: (path: `/${string}`) => {
    return axios.get(path)
  }
}

最终使用

import useSWR from 'swr'
import { ajax } from '../lib/ajax'

export const Home: React.FC = () => {
  const { data, error, isLoading } = useSWR('/api/v1/me', path => {
    return ajax.get(path)
  })

  if (isLoading) {
    return <div>加载中...</div>
  }
  if (error) {
    return <div>加载失败</div>
  }

  return (
    <div>Hi, I am {data.name}!</div>
  )
}

标签: linux

热门推荐