const handleSubmit = (e) => { e.preventDefault(); const userData = { username, email, password }; fetch('http://localhost:8080/signup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userData), }) .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); };

.then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); };

Which of the following is a preferrable way to send a GET request in react?Aconst App = () => {const fetchHandler = () => {  fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();return <div></div>}Bconst fetchHandler = () => {  fetch('randomapi').then(res => {console.log(res)}) }const App = () => {fetchHandler();return <div></div>}Cconst App = () => {useEffect(() => {const fetchHandler = () => {  fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();}, []);return <div></div>}DNone of the above

Which of the following is an appropriate way of sending POST request in react and printing the response on console?Aconst App = () => {const [body, setBody] = useState([]);const postHandler = () => {   fetch('http://api.com', {method: 'POST', body: body})   .then(res => console.log(res))}return <button onClick={postHandler}> Click</button>}Bconst App = () => {const [body, setBody] = useState([]);const postHandler = () => {   fetch('http://api.com')   .then(res => console.log(res))}return <button onClick={postHandler}> Click</button>}Cconst App = () => {const [body, setBody] = useState([]);const postHandler = () => {   fetch('http://api.com')   .then( console.log(res))}return <button onClick={postHandler}> Click</button>}DNone of the above

10.Question 10How can a function fetchData be implemented in JavaScript to fetch data from a remote server using an asynchronous API call that takes a URL and returns a promise that resolves with the fetched data or rejects with an error message if the request fails?1 pointfunction fetchData(url) {<br> return fetch(url).then(response => {<br> if (!response.ok) {<br> throw new Error("Request failed.");<br> }<br><br> return response.json();<br> });<br>}function fetchData(url) {<br> return fetch(url).then(response => {<br> if (response.status !== 200) {<br> throw new Error("Request failed.");<br> }<br><br> return response.json();<br> });<br>}function fetchData(url) {<br> return fetch(url).then(response => {<br> if (response.ok) {<br> return response.json();<br> } else {<br> throw new Error("Request failed.");<br> }<br> });<br>}function fetchData(url) {<br> return fetch(url).then(response => {<br> if (response.status === 200) {<br> return response.json();<br> } else {<br> throw new Error("Request failed.");<br> }<br> });<br>}

fetch() returns a Promise that resolves to the Response to that request, whether it is successful or not.