DEV Community

Matthew Wigoff
Matthew Wigoff

Posted on

Option 3 - API/Product Owner - Wikipedia-Query

What is an API
API Stands for Application Programming Interface. An API is the glue for two systems communicating with one another to exchange credentials to access information. An API integrates the front-end with back-end.

Fetch
The fetch() functionality provides a wait time to achieve a successful connection of fetching a resource from the network to establish a promise from the availability of the response.

The way a fetch() API works is first pass in a URL. This is the first property. The second property is optional, however this is where you put in the post request.

Consider the below image for example. (this.locationEndpoint + userIPdata.ip) is fetching the 'https://freegeoip.app/json/' URL. The '.then(resp.ok){
return resp.json();}'
block of code is returning a promise, specifically the .json function.

The '.then(data => {
console.log(data);'
block of code returns the data latitude, longitude, city, and region name.

Image description

Image description

Wikipedia Query
The below code snippet adds the Wikipedia Query Search for location, city, and region.

Image description

Importing the wikipedia-query web component allows us to use the html wikipedia page.

Image description

Git Repository

Top comments (0)