MCQs on Fetch API and HTTP Requests | JavaScript Intermediate

This chapter covers key concepts related to the Fetch API and HTTP requests, such as how to fetch data, handle JSON responses, and work with HTTP methods like GET and POST. Understanding error handling is also crucial for robust web development.

Fetching Data with Fetch API

1. Which method is used to fetch data from a server in the Fetch API?
   • a) getData()
   • b) fetchData()
   • c) fetch()
   • d) requestData()
2. What does the fetch() method return in JavaScript?
   • a) A JSON object
   • b) A promise
   • c) An HTTP response
   • d) A callback function
3. How do you handle a successful response when using the Fetch API?
   • a) .then(response => response.json())
   • b) .catch(error => console.log(error))
   • c) .finally(response => console.log(response))
   • d) .all(response => response.json())
4. In which format does the fetch() method return the response data?
   • a) JSON
   • b) HTML
   • c) Text
   • d) All of the above
5. What type of object is returned by response.json() in the Fetch API?
   • a) Array
   • b) String
   • c) Object
   • d) Boolean

Handling JSON Responses

6. Which of the following is the correct way to parse JSON data returned by the Fetch API?
   • a) response.parseJSON()
   • b) response.toJSON()
   • c) response.json()
   • d) response.convertJSON()
7. What does the .json() method do?
   • a) Converts the response into a JavaScript object
   • b) Converts the response into an array
   • c) Extracts plain text from the response
   • d) Extracts an HTML document
8. When working with JSON data in the Fetch API, what must be done before using it in the JavaScript code?
   • a) It must be validated
   • b) It must be parsed into an object
   • c) It must be logged to the console
   • d) It must be converted into a string
9. If a Fetch API request fails, what can be done to check the issue?
   • a) Check the status code
   • b) Use the .catch() method
   • c) Inspect the JSON data
   • d) Both a and b
10. Which of the following can be a response status code indicating a successful Fetch request?
    • a) 404
    • b) 500
    • c) 200
    • d) 301

Working with HTTP Methods (GET, POST, etc.)

11. Which HTTP method is used to retrieve data from a server?
    • a) POST
    • b) GET
    • c) PUT
    • d) DELETE
12. Which HTTP method is used to send data to a server?
    • a) GET
    • b) PUT
    • c) POST
    • d) PATCH
13. How do you make a POST request using the Fetch API?
    • a) fetch(‘url’, { method: ‘GET’ })
    • b) fetch(‘url’, { method: ‘POST’, body: JSON.stringify(data) })
    • c) fetch(‘url’, { method: ‘POST’ })
    • d) fetch(‘url’, { body: data })
14. Which of the following headers is commonly included in a POST request when sending JSON data?
    • a) Content-Type: application/json
    • b) Content-Length: 0
    • c) Accept: text/html
    • d) Cache-Control: no-cache
15. What is the default method for the Fetch API request?
    • a) GET
    • b) POST
    • c) DELETE
    • d) PUT

Error Handling with Fetch API

16. How can you handle errors when using the Fetch API?
    • a) Using .catch()
    • b) Using .then()
    • c) Using .finally()
    • d) Using response.ok
17. Which status code is associated with a successful request in Fetch API?
    • a) 500
    • b) 404
    • c) 200
    • d) 403
18. How do you check if the Fetch API response was successful?
    • a) Check response.status
    • b) Check response.ok
    • c) Check response.text()
    • d) Check response.json()
19. What will happen if a network error occurs in the Fetch API?
    • a) The promise will resolve with an error
    • b) The promise will reject
    • c) The promise will ignore the error
    • d) The promise will log the error to the console
20. What should you do to handle unsuccessful HTTP responses in Fetch API?
    • a) Use response.ok to check and handle errors
    • b) Ignore the error
    • c) Log the error using .catch()
    • d) Use .finally()
21. If you need to retry a Fetch request after a failure, which of the following is most commonly used?
    • a) Recursive function call
    • b) Try-Catch block
    • c) Both a and b
    • d) Timeout function
22. What does the .catch() method in the Fetch API do?
    • a) It handles successful responses
    • b) It handles network errors and other failures
    • c) It parses the JSON response
    • d) It logs the response status
23. How can you ensure that a Fetch request is always executed, regardless of whether the request is successful or not?
    • a) Using .finally()
    • b) Using .then()
    • c) Using .catch()
    • d) Using .json()
24. What should you do if the Fetch API returns a response with status 404?
    • a) Retry the request
    • b) Log an error message
    • c) Ignore the error
    • d) Modify the URL and try again
25. In the Fetch API, what does response.ok indicate?
    • a) The response has data
    • b) The response status is successful (200-299)
    • c) The response is a valid JSON
    • d) The response has no content
26. What does the .finally() method in Fetch API ensure?
    • a) The request is canceled
    • b) The promise always executes, no matter the outcome
    • c) The response is formatted into JSON
    • d) The request is queued for retry
27. What is the recommended way to handle both success and error in a single .then() block?
    • a) Chain .then() and .catch() methods
    • b) Use try-catch block inside .then()
    • c) Use .finally() for error handling
    • d) Use response.json() only
28. Which Fetch API method returns a Promise that resolves after the response body has been fully consumed?
    • a) .then()
    • b) .json()
    • c) .text()
    • d) .finally()
29. What does response.status represent in the Fetch API?
    • a) The HTTP status code of the response
    • b) The response body
    • c) The headers of the response
    • d) The method used for the request
30. Which Fetch API method is used to read the response body as a string?
    • a) .json()
    • b) .text()
    • c) .blob()
    • d) .formData()

Answers