The Fetch API not only provides us with a GET request, but it also provides us with POST, PUT and DELETE requests. So far, we have discussed two examples for fetching data. Temp+= ""++ "" ĭocument.getElementById( "data").innerHTML=temp We are adding a table element in our HTML and then iterating through the JSON data and adding them to the table (i.e., and ). The dataset has many properties and in this example I am displaying two properties, the drink name(strDrink) and instructions(strInstructions), in an HTML table as shown in the output. Let us look at the JSON data we have received in the console. Finally, we create an IMG element and place the data fetched into the element.Įxample 2: Fetching JSON data and displaying in an HTML table In this example, we are extracting the JSON data fetched from a live API ( ) which is an open crowd-sourced database of drinks and cocktails from around the world.
We are then using a function URL.create ObjectURL() method that creates a DOMString containing a URL representing the object. console.log( "about to fetch a flower") Ĭonst response = await fetch( '/anim.jpg') ĭocument.getElementById( 'flower').src=URL.createObjectURL(blob) Įxplanation: In the above example, we are using the async/await keyword that allows us to deal with promises in a readable and clean way. Let us look at a simple example of fetching an image which makes it easier to understand the concept. Have a look at the following response object: Response.ok is a Boolean value that lets us know if the response was successful or not, whereas Response.status represents the HTTP status codes, such as 200 for success and 404 if the resource is not found. Method: The request method is either GET or POST.īody: The body can be any of the following: (), Body.Blob(), Body.formData(), Body.json(), Body.text().Īs discussed, we know that HTTP errors must be handled by using the response object properties Response.ok and Response.status. Syntax:Ĭonst response=fetch( URL ) URL: a URL object that represents the path of the resource to be fetched Init (optional): Any further options such as: However, we must handle the HTTP errors as the promise only rejects network errors. The response object further contains the data that needs to be converted into the required format in order to work with it. It then returns a promise that resolves into a response object. The path to the resource is the first parameter and is required all the time, whereas the init parameter is optional. The basic fetch request can be explained by the following code: 1 It allows you to make an HTTP request, i.e., either a GET request (for getting data) or POST request (for posting data). The fetch() method:įetch API comes with a fetch () method that allows you to fetch data from all sorts of different places and work with the data fetched. It is similar to XML HTTP requests but better and more powerful.
The Fetch API is a promise-based interface for fetching resources by making HTTP requests to servers from web browsers.
0 kommentar(er)
