欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vite中自制mock服務(wù)器(不使用第三方服務(wù))

 更新時間:2023年04月16日 16:22:29   作者:陳楠112  
本文主要介紹了Vite中自制mock服務(wù)器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

為什么要 mock?

  • 后臺接口還沒完成,但前端要用到接口
  • 我想篡改后臺接口的結(jié)果,測試一些分支邏輯

起步

本篇文章會使用到 swraxios、vite-plugin-mock,請自行安裝

配置 vite進(jìn)入 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()
  ],
}))

創(chuàng)建 mock 數(shù)據(jù)

  • 創(chuàng)建 mock/test.ts 文件
mkdir mock/ && touch mock/test.ts
  • 添加 mock 數(shù)據(jù)
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>
  )
}

判斷是否在開發(fā)環(huán)境

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>
  )
}

到此這篇關(guān)于Vite中自制mock服務(wù)器(不使用第三方服務(wù))的文章就介紹到這了,更多相關(guān)Vite mock服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue項目查看當(dāng)前使用的elementUI版本的方法

    Vue項目查看當(dāng)前使用的elementUI版本的方法

    今天小編就為大家分享一篇Vue項目查看當(dāng)前使用的elementUI版本的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue.js實(shí)戰(zhàn)之組件的進(jìn)階

    Vue.js實(shí)戰(zhàn)之組件的進(jìn)階

    組件(Component)是 Vue.js 最強(qiáng)大的功能之一,之前的文章都只是用到了基本的封裝功能,這次將介紹一些更強(qiáng)大的擴(kuò)展。這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件進(jìn)階的相關(guān)資料,需要的朋友們可以參考借鑒,下面來一起看看吧。
    2017-04-04
  • Vue3中使用echarts的簡單七個步驟(易懂,附緊急避坑)

    Vue3中使用echarts的簡單七個步驟(易懂,附緊急避坑)

    近期在做一個vue3的項目,里面有個圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡單七個步驟,需要的朋友可以參考下
    2023-01-01
  • vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果

    vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果

    這篇文章主要介紹了vuejs實(shí)現(xiàn)折疊面板展開收縮動畫效果,文中通過代碼給大家分享兩種情況介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue請求java服務(wù)端并返回數(shù)據(jù)代碼實(shí)例

    Vue請求java服務(wù)端并返回數(shù)據(jù)代碼實(shí)例

    這篇文章主要介紹了Vue請求java服務(wù)端并返回數(shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • 詳解Vue-axios 設(shè)置請求頭問題

    詳解Vue-axios 設(shè)置請求頭問題

    這篇文章主要介紹了Vue-axios 設(shè)置請求頭問題,文中給大家提到了axios設(shè)置請求頭內(nèi)容的方法,需要的朋友可以參考下
    2018-12-12
  • vue單個元素綁定多個事件問題(例如點(diǎn)擊綁定多個事件方法)

    vue單個元素綁定多個事件問題(例如點(diǎn)擊綁定多個事件方法)

    這篇文章主要介紹了vue單個元素綁定多個事件問題(例如點(diǎn)擊綁定多個事件方法),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue實(shí)現(xiàn)分割驗證碼效果

    vue實(shí)現(xiàn)分割驗證碼效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分割驗證碼效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue2中使用quill編輯器+表格功能(步驟詳解)

    vue2中使用quill編輯器+表格功能(步驟詳解)

    這篇文章主要介紹了vue2中使用quill編輯器+表格功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸

    Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸

    這篇文章主要介紹了Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論