Using APIs for the first time

I have recently finished a project using and API for the first time and i will explain the process of what i did and learned. Before even trying to attempt using an API you have to learn promises in JS and this is a key factor in using APIs. After understanding promises i always wanted to use the Riot API as i play a bit of league of legends in my spare time and always found it a cool idea, that i could code some form of website that can pull up your account by just inputting your account name and server. Firstly, I googled Riot API and started from there. I found out that all you need is a call string and that will return all the data that I want. I got my API key and pasted in the link in the web to view the result, and this is what popped up.

{"id":"TtqJb-79WyxdBjDBPWcAzDxPH9kYW4JXRyjNqgjss3eNnduR","accountId":"VRZyzhiuV192Ukalt94gG_jSmVNA1UXbvcHtIbhy1u60jWgxoDgdRay5","puuid":"H9hyWah3cg9MPtAP7iMZVG9vsqgEAe4152UBjLIwf76TKZLX5Hvl-NOU1n8dtrTyvFXs71kpdLJWlQ","name":"M4T789","profileIconId":3536,"revisionDate":1652535439000,"summonerLevel":154}

All that this needed was: server the player is on, the profile name and your API key. This returns the data about the player. Now to implement it into code.

To be honest before I did this project I thought that working with API's is a scary thing, however its pretty simple. (It was with this API anyway). All you have to do is: 1- Create a variable which will hold the APICallString with the player information: I did it like this

const APICallString = `https://${this.server}.api.riotgames.com/lol/summoner/v4/summoners/by-name/${this.summonerID}?api_key=${this.riot_key}`;

Next is to actually make the call. You do this by using promises/Async await, I did it using promises this time as I am a bit more comfortable using them at this stage.

fetch(APICallString)
        .then((response) => response.json())
        .then((data) => {console.log(data)})
        .catch((error) => console.log(error));

Its as easy as that. You pass your call string to a fetch() and then you have access to all of the data that you need. We convert the data into a JSON and print it out. This only covers the basics of what I did for my first API project, as I went further and used Vue later on to make my life passing data around a bit easier.