单页应用中同路由处理AXIOS GET/POST请求是否合理？需手动刷新

1. 同路由处理GET/POST请求的合理性 #

完全合理，这是RESTful API设计的标准实践：

• GET /api/v1/list：用于获取资源列表，契合GET方法“查询、只读”的语义
• POST /api/v1/list：用于创建新资源项，契合POST方法“提交、创建”的语义
  主流后端框架（如Express、NestJS）都原生支持根据HTTP方法匹配同一路径的路由，这种设计简洁规范，完全符合行业通用做法。

2. 解决手动刷新页面的问题 #

你需要手动刷新是因为创建操作完成后没有主动同步最新列表数据。当前组件仅在挂载阶段通过useEffect调用getItems，创建新条目后前端状态未更新，导致页面无法自动刷新。

修改createJob函数，在POST请求成功后调用getItems即可实现自动更新：

const createJob = async () => {
    dispatch({ type: CREATE_LIST_BEGIN })
    try {
        const { item, price, stock } = state
        await axios.post('/api/v1/list', { item, price, stock })
        dispatch({ type: CREATE_LIST_SUCCESS })
        dispatch({ type: CLEAR_VALUES })
        // 新增：创建成功后重新获取最新列表
        await getItems()
    } catch (error) {
        if (error.response.status === 401) return
        dispatch({ type: CREATE_LIST_ERROR, payload: { msg: error.response.data.msg } })
    }
    clearAlert()
}

可选优化方案 #

若追求更高性能，可让后端在POST请求成功后返回刚创建的资源对象，直接更新前端的items数组，避免重新请求整个列表：

// 假设后端返回格式：{ data: { newItem: { _id: "...", item: "...", price: "...", stock: "..." } } }
const createJob = async () => {
    dispatch({ type: CREATE_LIST_BEGIN })
    try {
        const { item, price, stock } = state
        const { data } = await axios.post('/api/v1/list', { item, price, stock })
        dispatch({ type: CREATE_LIST_SUCCESS })
        dispatch({ type: CLEAR_VALUES })
        // 直接更新状态，无需重新发起GET请求
        dispatch({ 
            type: GET_LIST_SUCCESS, 
            payload: { items: [...state.items, data.newItem] } 
        })
    } catch (error) {
        if (error.response.status === 401) return
        dispatch({ type: CREATE_LIST_ERROR, payload: { msg: error.response.data.msg } })
    }
    clearAlert()
}

这种方式减少了一次HTTP请求，适合数据量较大或对性能要求较高的场景，但需要后端配合返回新创建的资源数据。

内容的提问来源于stack exchange，提问作者kishore kumar