Using Fetch with Web APIs
Websites can be either static or dynamic. Static websites display the same for every user and only changes if the developer goes in and changes the HTML. Dynamic websites change depending on each user. If the website changes every time you open in then changes are it is dynamic.
When building out web applications we need to connect the client (user) to the server. When the client makes request to the server and it is rendered in the DOM we use AJAX which stands for Asynchronous JavaScript and XML. AJAX loads the HTML AND CSS then behind the scenes loads our JavaScript. The data sent back to the client is formatted in JavaScript Object Notation or JSON for short. JSON is stored as a string so it is readable for humans. We can create functions in JavaScript to manipulate the data returned from the request. The request and response between the client and the server differ depending on if the you are building a static website or a dynamic web application.
One function used to retrieve data is called fetch(). You can use this just by calling fetch () and passing through a resource for an argument.We add on a .then statement if we want to use the data that is returned. We asked for that data returned to be turned into JSON. The last .then () statement is the return from the first .then(). You can console.log that JSON return , or create a function for DOM manipulation. This process is called completing a promise. Fetch is new function, legacy code might use jquery.ajax or $.ajax. The fetch function is flexible, not only can you use it to render data to the DOM but you can also use it to manipulate that data.
An application programming interface or API is how some companies share their data for developers to use in their programs. An example of how APIs work is buying an airplane ticket. You could interact with the airline’s database directly by searching for your flight to the desired destination on the desired date. The airline’s website will respond with flight information about the possible fights to your destination from the airline’s charter . If you used a travel partner like Travelocity or Expedia the search will pull up different airlines and compare them by the set filters. The travel partner is using the airline’s API and sending the requested information back to the client. APIs are very powerful tools.
We can change the URL we pass to fetch based on the HTML of the web page. We can also render the fetched data to our page. We can write our code in the second .then statement of we can create a function to render the data and then pass that data through the rendering function.
There are different methods when it comes to fetches some of the most common ones are GET ,POST ,PATCH, and DELETE. GET is the method used to retrieve the data nothing else is done at this point.POST is used to add new content to the data. PATCH edits the existing content and applies partial modifications, and DELETE deletes something from the content. Each method has a specific format.
The GET request methods are very powerful tools in JavaScript. Fetch comes in handy when it is time to modify your web application so each user can have a particular and accommodating experience using your program.
