RESTFul API 常在 Route 中夾帶 Data，這種 API 該如何 Mock 呢 ?
Version
MSW 0.28.2
API Function
api/getPrice.js
import axios from 'axios'
export default id => axios.get(`/price/${id}`)
在 Route 會傳入不同 id，亦會回傳不同資料。
Mock Function
mock/getPrice.js
import { rest } from 'msw'
let priceMap = {
'1': 100,
'2': 200,
'3': 300
}
export default rest.get('/price/:id', (req, res, ctx) => {
let { id } = req.params
return res(
ctx.status(200),
ctx.json({
'price': priceMap[id],
})
)
})
10 行
let { id } = req.params
從 req.params 解構出 id。
第 3 行
let priceMap = {
'1': 100,
'2': 200,
'3': 300
}
設定 id 與 price 所對應的 Object。
12 行
return res(
ctx.status(200),
ctx.json({
'price': priceMap[id],
})
)
使用 priceMap[id] 根據不同 id 回傳不同 price。
mock/index.js
import { setupWorker } from 'msw'
import getPrice from './getPrice'
export default setupWorker(getPrice)
將 getPrice() 傳給 setupWorker() 完成 mock。
Conclusion
- 透過
req.params的 destructure 可得到id，進而搭配 Object 可動態 mock 出不同price