In this example:
if (!response.ok)
check to throw an error if the response status is not ok (i.e., not in the 200-299 range).
- In the
catch
block, we set the searchText
state to display the error message to the user.
- Finally, we set
isLoading
to false in the finally
block to indicate that the loading process is complete.
const fetchData = async () => {
try {
const data = JSON.stringify({
"input": {
"message": inputValue
}
});
const response = await fetch(YOUR_API, {
method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
body: data,
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const responseData = await response.json();
setResponseData(responseData);
// Update search history with the new input value and response
setSearchHistory((prevSearchHistory) => [
...prevSearchHistory,
{ question: inputValue, answer: responseData.output.response.content },
]);
} catch (error) {
console.error('Error:', error);
// Display error message to the user
setSearchText('Your search is unavailable at the moment');
} finally {
setIsLoading(false);
}
};
in JSX
<div className="buddyResultContainer">
{searchText ? (
<div className="search-error">{searchText}</div>
) : (
searchHistory.map((item, index) => (
<div
key={index}
className="buddy_qa_item"
ref={index === searchHistory.length - 1 ? setLastItemRef : null}
>
{/* Your existing code to display search history */}
</div>
))
)}
</div>