gpt4 book ai didi

javascript - React Axios 服务类

转载 作者:行者123 更新时间:2023-12-02 23:47:22 24 4
gpt4 key购买 nike

我正在使用 axios 处理 React/Redux 应用程序中的 API 调用。 token 是全局设置的。

以下是一些示例:

// Add Post
export const addPost = postData => dispatch => {
dispatch(clearErrors());

axios
.post('/api/posts', postData)
.then(res =>
dispatch({
type: ADD_POST,
payload: res.data,
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};

// Add Comment
export const addComment = (postId, commentData) => dispatch => {
dispatch(clearErrors());

axios
.post(`/api/posts/comment/${postId}`, commentData)
.then(res =>
dispatch({
type: GET_POST,
payload: res.data,
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};

// Get posts
export const getPosts = () => dispatch => {
dispatch(setPostsLoading);

axios
.get('/api/posts')
.then(res =>
dispatch({
type: GET_POSTS,
payload: res.data,
})
)
.catch(err =>
dispatch({
type: GET_POSTS,
payload: null,
})
);
};

// Delete post
export const deletePost = id => dispatch => {
axios
.delete(`/api/posts/${id}`)
.then(res =>
dispatch({
type: DELETE_POST,
payload: id,
})
)
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};

您能否告诉我,在可扩展应用程序中处理此类 API 调用的最佳方法是什么?也许,有一个 Axios 包装器/服务类的示例来简化它,而不是每次都编写相同的逻辑?

谢谢!

最佳答案

您可以轻松地使用一个小的柯里化(Currying)函数来实现:

 const api = (url, type, errorType) => postData => dispatch => {
dispatch(clearErrors());

axios
.post(url, postData)
.then(res =>
dispatch({
type,
payload: res.data,
})
)
.catch(err =>
dispatch({
type: errorType,
payload: err.response.data,
})
);
};

然后可以用作:

export const addPost = api("api/post", ADD_POST, GET_ERRORS);

export const addComment = (postId, data) => api(`/api/posts/comment/${postId}`, ADD_COMMENT, GET_ERRORS)(data);

关于javascript - React Axios 服务类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55795177/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com