如何将重复的API调用重构为单个API调用?

Question

我是构建全栈应用程序的新手，我想避免重复代码，以便构建以下代码以执行react中的调用，我的端点可以像以下/api/v1/feeds/list/?page=${page}或api/v1/feeds/list/?search=${query}一样被调用，但我想加入?page=${page}&?search=${query}，因为search参数是可选的。我只想做一个api调用

async function fetchFeed(page) {
return api.get(`http://localhost:8001/api/v1/feeds/list/?page=${page}`);
}

async function searchQuery(query) {
return api.get(`http://localhost:8001/api/v1/feeds/list/?search=${query}`);
}
const Main = () => {
const [currentPage, setCurrentPage] = useState(1);
const [feed, setFeed] = useState([]);
const [feedCount, setfeedCount] = useState(0);
const [visible, setVisible] = useState(3)

const showMoreItems = () => {
setVisible(prevValue => prevValue + 3);
}

const browse = (page) =>  {
fetchFeed(page)
.then(function(response){
setfeedCount(response.data.count)
setFeed(response.data.results)
})
.catch(function(error){
console.log(error);
});
}

// fetches data
const fetchData = (search) => {
searchQuery(search)
.then((response) => {
setFeed(response.data.results)
})
.catch((error) => {
console.log(error);
});
};

const handleSearch = (e) =>{
fetchData(e.target.value);
}

useEffect(() => {
browse(currentPage)
fetchData(feed);
}, [currentPage]);
}

Answer 1

我将传递一个对象与page和query，这两个默认为空字符串-如果是空的，不包括它们在获取的URL:

async function fetchFeed({ page = '', query = '' }) {
return api.get(`http://localhost:8001/api/v1/feeds/list/?${page ? `page=${page}&` : ''}${query ? `search=${query}` : ''}`);
}

如果可能的话，让你的API也接受空的查询参数，允许你简化为

return api.get(`http://localhost:8001/api/v1/feeds/list/?page=${page}&query=${query}`);

Answer 2

像这样的东西应该为您工作

const fetchFeed = async (page, query) => {
let url =`http://localhost:8001/api/v1/feeds/list/?page=${page}`
if(query) url += `?search=${query}`
return api.get(url)
}
const browse = (page search) =>  {
await fetchFeed(page search)
.then(function(response){
!search && setfeedCount(response.data.count)
setFeed(response.data.results)
})
.catch(function(error){
console.log(error);
});
}
useEffect(() => {
browse(currentPage) // just pass page
browse(currentPage, searchQuery); // pass both page and search query
}, [currentPage]);