Download fetch api code#
Here I use the console to demonstrate the easiness of the process, but a more practical approach would be to put the code inside a JS script.When you execute the request, you will probably get a different value, because the API provides a random number.Press the name "dummy-api/", and on the right side you can see the request headers:Ī "200" response code indicates that the data is received and the operation is performed.Īnd there's also the body of the response which contains the random number that you can see by clicking the "Preview" tab:.Click the "Network" tab to see all of your requests, and then press the "XHR" tab to see the AJAX requests.Open the Chrome developer tools (Ctrl + Shift + I on Windows/Linux, Cmd + Opt + I on a Mac).You can see for yourself by following the instructions:
In the case of failure, the response will be handled by the catch block, and in case of success the response will be handled by the then block. Therefore, it can return one of two possible responses, success or failure: fetch('')
The fetch() method returns a promise (and if you are not familiar with the concept, you can learn about JavaScript promises in the following tutorial). This tutorial will show both options in action. The main advantage of the Fetch API over XMLHttpRequest (XHR) objects is that the Fetch API is based on JavaScript Promises, which allows you to get rid of nested callback functions and get clean and simple code. Alternatively, you can send a POST request with a minimum and maximum value, and receive a random number in the range. The Fetch API is a new way to send and receive HTTP requests in JavaScript. A simple GET request will return a random number between 1 and 10. The URL is for a very simple API service that returns a random number in a range of numbers. The only parameter that is essential to pass to the fetch() method is the URL from which we want to get the data.
0 kommentar(er)
