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

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>}

explain fetchapi in js

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 a valid way to use async/await with fetch to make an API call?Aasync function fetchAPI() { const response = await fetch('https://example.com/api'); const data = await response.json(); return data;}Bfunction fetchAPI() { fetch('https://example.com/api')   .then(response => response.json())   .then(data => console.log(data))   .catch(error => console.error(error));}Casync function fetchAPI() { try {   const response = await fetch('https://example.com/api');   const data = await response.json();   return data; } catch(error) {   console.error(error); }}Dasync function fetchAPI() { const response = await fetch('https://example.com/api')   .then(response => response.json())   .catch(error => console.error(error)); return response;}

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); }); };