Vite中自制mock服務(wù)器(不使用第三方服務(wù))
為什么要 mock
?
- 后臺(tái)接口還沒(méi)完成,但前端要用到接口
- 我想篡改后臺(tái)接口的結(jié)果,測(cè)試一些分支邏輯
起步
本篇文章會(huì)使用到 swr
、axios
、vite-plugin-mock
,請(qǐng)自行安裝
配置 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> ) }
判斷是否在開(kāi)發(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' // 它會(huì)寫(xiě)在 window.isDev = true / false + }, plugins: [ react(), viteMockServe() ], }))
封裝請(qǐng)求
這里只是簡(jiǎn)單的封裝一下
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3中簡(jiǎn)單使用Mock.js方法實(shí)例分析
- vite+vue3中使用mock模擬數(shù)據(jù)問(wèn)題
- vue3和ts封裝axios以及使用mock.js詳解
- Vue3+Vite項(xiàng)目使用mockjs隨機(jī)模擬數(shù)據(jù)
- 在Vue框架中配置Mock服務(wù)器的方法
- Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄
- Vue mockjs編寫(xiě)假數(shù)據(jù)并請(qǐng)求獲取實(shí)現(xiàn)流程
- Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁(yè)導(dǎo)航與左側(cè)菜單功能
相關(guān)文章
Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue.js實(shí)戰(zhàn)之組件的進(jìn)階
組件(Component)是 Vue.js 最強(qiáng)大的功能之一,之前的文章都只是用到了基本的封裝功能,這次將介紹一些更強(qiáng)大的擴(kuò)展。這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件進(jìn)階的相關(guān)資料,需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2017-04-04Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟(易懂,附緊急避坑)
近期在做一個(gè)vue3的項(xiàng)目,里面有個(gè)圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用echarts的簡(jiǎn)單七個(gè)步驟,需要的朋友可以參考下2023-01-01vuejs實(shí)現(xiàn)折疊面板展開(kāi)收縮動(dòng)畫(huà)效果
這篇文章主要介紹了vuejs實(shí)現(xiàn)折疊面板展開(kāi)收縮動(dòng)畫(huà)效果,文中通過(guò)代碼給大家分享兩種情況介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例
這篇文章主要介紹了Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11詳解Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題
這篇文章主要介紹了Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題,文中給大家提到了axios設(shè)置請(qǐng)求頭內(nèi)容的方法,需要的朋友可以參考下2018-12-12vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)
這篇文章主要介紹了vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09