Learn How API’s Work

API’s are confusing. I barely understand them myself, but they are so useful. Outsourcing code can make your life so much easier. API’s are very helpful in communicating with other services. Today I’m gong to go through what happens when you request fr…


This content originally appeared on DEV Community and was authored by Kern Designs

API's are confusing. I barely understand them myself, but they are so useful. Outsourcing code can make your life so much easier. API's are very helpful in communicating with other services. Today I'm gong to go through what happens when you request from the Wikipedia API with data from a locational API.

The request

A fetch call is used to send a request to the locational API. This is so the API will help them retrieve data. In this example we fetch the location and IP address of of the user. The request code is shown below. You can see that the data is then saved as variables.

return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.lat = data.latitude;
        this.long = data.longitude;
        this.city = data.city;
        this.state = data.region_name;
        console.log(`${this.lat} ${this.long}`);
        return data;
      });

Wikipedia API

The Wikipedia API has many functions but we are using the query function. In this function the action of querying sends us the information that we are looking for. In our code we stored the response from the location in variables. We can use these variables as the search when we call the Wikipedia API.

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query>

Once these are called in the page the response is displayed as a Wikipedia article if one exists. With the use of these two APIs and very little coding on our part we have a working program that displays an article specific to the user.


This content originally appeared on DEV Community and was authored by Kern Designs


Print Share Comment Cite Upload Translate Updates
APA

Kern Designs | Sciencx (2022-01-31T03:47:28+00:00) Learn How API’s Work. Retrieved from https://www.scien.cx/2022/01/31/learn-how-apis-work/

MLA
" » Learn How API’s Work." Kern Designs | Sciencx - Monday January 31, 2022, https://www.scien.cx/2022/01/31/learn-how-apis-work/
HARVARD
Kern Designs | Sciencx Monday January 31, 2022 » Learn How API’s Work., viewed ,<https://www.scien.cx/2022/01/31/learn-how-apis-work/>
VANCOUVER
Kern Designs | Sciencx - » Learn How API’s Work. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/31/learn-how-apis-work/
CHICAGO
" » Learn How API’s Work." Kern Designs | Sciencx - Accessed . https://www.scien.cx/2022/01/31/learn-how-apis-work/
IEEE
" » Learn How API’s Work." Kern Designs | Sciencx [Online]. Available: https://www.scien.cx/2022/01/31/learn-how-apis-work/. [Accessed: ]
rf:citation
» Learn How API’s Work | Kern Designs | Sciencx | https://www.scien.cx/2022/01/31/learn-how-apis-work/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.