To be absolutely sure that our request is successful, we must check the status code of the Response object, which is available in its status property, or test the ok read-only property, which contains a boolean stating if the result was successful or not. Remembering this behavior is really important: the promise returned by the fetch method is rejected only if the communication with the server fails and the request cannot be completed. This time, the callback used as argument of the catch method was called. If we try the same code changing only the request destination to a non-existent path, ‘’, the code returns: Promise has been rejected! This however, didn’t cause the promise to be rejected, and the callback of the then method was called. What happened? Since we used an HTTP verb not allowed for the specified endpoint, we received a response with a Method Not Allowed status code (405). The result of running the above code is: Promise has been fulfilled even if response status is 405 catch(reason => console.log('Promise has been rejected!')) The fetch() method allows you to make asynchronous JavaScript and XML (AJAX) calls with JavaScript which were previously made using XMLHttpRequest. Here is the result of running the code: `)) All of the above, happens asynchronously.
![fetch javascript fetch javascript](https://i.stack.imgur.com/5MCRO.png)
This is why the JSON object is available as the argument of the first callback of the second then method in the example. What is this method for? It reads the response stream to its end, and returns itself a promise that resolves with the body of the response being parsed as JSON.Īs we know, if a handler function of the then method returns a promise, the fulfillment value of said promise is used as the fulfillment value of the promise returned by the then method itself. This object, among the others, has a method called json() which we call in the body of the callback. The callback used as the first argument of the then method, takes the fulfillment value of the promise as its argument, which in this case is the Response object. Here we only provided the first one since we used the catch method for the purpose (we will talk about handling errors in a minute). Let’s remember that the method returns itself a new promise, and accepts up to two callbacks as its arguments: the first is called if the promise is fulfilled the second if it is rejected. The then method of the promise object is called when the promise exists the pending state. Let’s briefly explain how the code above works.The fetch function returns a promise: if said promise is fulfilled, it resolves to a Response object which represents the HTTP response to the request we sent. then(json_object => console.log(json_object))
![fetch javascript fetch javascript](https://www.oxxostudio.tw/img/articles/201908/js-fetch-s.jpg)
For the sake of this example, we will use the NASA API call which returns information about the astronomic “picture of the day” in JSON format. When only this parameter is passed to the function, a GET request is performed to retrieve the specified resource. In JavaScript, the fetch() method is used to make asynchronous requests to the server and load the information that is returned by the server onto the web. The fetch method has only one mandatory argument, which is either the path of the resource to be fetched or a Request object.
![fetch javascript fetch javascript](https://res.cloudinary.com/practicaldev/image/fetch/s--d5FWHZfU--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqsfs2wohzh4efelu7u0.png)
After the fetch() method, include the Promise method then(): fetch (url ). One approach to using the Fetch API is by passing fetch() the URL of the API as a parameter: fetch (url ) Step 1 - Getting Started with Fetch API Syntax Read the Promises section of this article on the event loop, callbacks, Promises, and async/await in JavaScript. An understanding of Promises in JavaScript.
![fetch javascript fetch javascript](https://i.stack.imgur.com/pDqd2.png)