React Native Networking: Fetch u0026 Axios Essentials Quiz Quiz

Challenge your understanding of networking in React Native with this quiz focused on Fetch and Axios for making HTTP requests, handling responses, and managing network errors. Ideal for anyone looking to reinforce key concepts for robust mobile app development using modern data fetching methods.

1. Basic HTTP Request Syntax

   Which method below correctly demonstrates how to make a GET request using the Fetch API in React Native?

   1. request('GET', 'https://example.com/data')
   2. fetch('https://example.com/data')
   3. get('https://example.com/data')
   4. axiosFetch('https://example.com/data')

   Explanation: The Fetch API's standard syntax for a GET request starts with fetch followed by the URL in parentheses. The other options are incorrect because 'get' is not a built-in function, 'axiosFetch' is not a valid method, and 'request' is not native in React Native for HTTP requests.

2. Default HTTP Method

   When using the Fetch API without specifying a method, such as fetch('https://api/data'), what HTTP method is used by default?

   1. GET
   2. PUT
   3. POST
   4. DELETE

   Explanation: When the method property is omitted in a Fetch request, the default HTTP method used is GET, which retrieves data. POST, PUT, and DELETE must be explicitly specified when making requests that modify or remove data.

3. Parsing JSON Responses

   In React Native, after making a Fetch request, how do you convert the response to JSON for further use?

   1. response.json()
   2. response.toJSON()
   3. response.asJson()
   4. response.parseJSON()

   Explanation: The correct method to parse a response as JSON is response.json(), which returns a promise resolving with the parsed data. The other options, such as toJSON(), asJson(), and parseJSON(), do not exist in the standard Fetch API response object.

4. Axios Request Return Type

   What does a basic Axios GET request, such as axios.get('https://api/user'), return in React Native?

   1. A string containing JSON data
   2. A Promise that resolves to a response object
   3. A boolean indicating success
   4. An immediate object

   Explanation: Axios returns a Promise that, when resolved, provides a response object containing the server's reply. It does not return an object immediately or a plain JSON string, nor does it simply yield a boolean for success.

5. Setting Headers with Fetch

   When customizing a Fetch request in React Native, which property is used to specify additional request headers?

   1. data
   2. cookies
   3. params
   4. headers

   Explanation: The 'headers' property allows you to add or override HTTP headers in Fetch requests, such as authentication or content type. 'data' and 'params' are not valid in Fetch's options, and 'cookies' is not a property for setting HTTP headers.

6. Handling Request Errors

   Which approach best describes how to handle errors from Fetch or Axios in React Native?

   1. Assume errors throw automatically and don't handle them
   2. Check error with a tryParse() method
   3. Use .catch() to handle rejected promises
   4. Use .then() only and ignore errors

   Explanation: Chaining .catch() after your request ensures you process errors from the Promise, such as network issues. Using only .then() will not handle errors, as .then() expects a resolved promise. There is no tryParse() for error handling, and ignoring errors can cause the app to crash or fail silently.

7. POST Requests with Axios

   When sending data using Axios POST in React Native, which argument is used for the payload?

   1. By appending data to the URL
   2. The second argument in axios.post(url, data)
   3. The first argument only
   4. A method property inside an options object

   Explanation: Axios POST requests require the data payload as the second argument after the URL. Simply providing only the URL or modifying the method property does not send data. Attaching data to the URL is not correct for POST requests.

8. Async/Await with Fetch

   Which statement correctly describes the use of async/await with the Fetch API in React Native?

   1. You can use await to pause execution until the Fetch promise resolves
   2. Await converts a promise to a string directly
   3. Async/await does not work with Fetch
   4. Async is only available for Axios

   Explanation: Async/await is compatible with the Fetch API, letting you write asynchronous code that looks synchronous by waiting for promises to resolve. Saying it is unavailable for Fetch is inaccurate, and await does not convert promises to strings. Async functions also work beyond Axios.

9. Response Data in Axios

   After an Axios request resolves, how do you access the main response data payload in React Native?

   1. response.content
   2. response.body
   3. response.data
   4. response.json

   Explanation: In Axios, the primary response data is stored in the 'data' property of the response object. The options 'json', 'body', and 'content' either do not exist or are not the standard for accessing the returned data when using Axios.

10. Timeout Handling

    Which statement correctly applies to setting a request timeout when using Axios in React Native?

    1. You set a timeout in the Axios config object
    2. There is no way to configure timeout in networking requests
    3. Axios automatically times out requests after 1 second
    4. Timeout is set using fetch's default options

    Explanation: In Axios, you can set a timeout by adding a 'timeout' property to the config object passed as an argument. Fetch does not have a built-in timeout, and Axios does not automatically apply a 1-second timeout. Claiming there is no way to set timeouts is incorrect.