thewhitefox

theWhiteFox design & build web apps

thewhitefox

APIs

2021 January 17th

Understanding APIs

API an acronym for Application Programming Interface. Below is several ways I have set up and consumed data from APIs.

Axios ReactJS API with Netlify

Axios promise based HTTP client Search unsplash netlify app. Unsplash API in ReactJS Github Repo

1import axios from 'axios';
2
3export default axios.create({
4 baseURL: 'https://api.unsplash.com',
5 headers: {
6 Authorization: 'Client-ID PASTE'
7 }
8});

Fetch API

Display User

1async function renderUsers() {
2 let users = await getUsers();
3 let html = '';
4 users.forEach(user => {
5 let htmlSegment = `
6 <div class="user">
7 <img src="${user.profileURL}">
8 <h2>${user.firstname} ${user.lastname}</h2>
9 <div class="email"><a href="mail:${user.email}">${user.email
10 </a></div>
11 </div>`;
12 html += htmlSegment;
13 });
14
15 let container = document.querySelector('.container');
16 container.innerHTML = html;
17}
18
19renderUsers();

Angular GiHub API

Search GiThub Users

JavaScript AJAX JSON repo

Yeah let's code!

Basic AJAX request

1/* @ Stephen O'Connor */
2(function () {
3
4 $.getJSON('data.json', function (data)
5 {
6 var output = '<ul>';
7 $.each(data, function (key, val)
8 {
9 output += '<li>' + val.name + '</li>';
10 });
11
12 output += '</ul>';
13 $('#update').append(output);
14 });
15
16}());

Ref

digitalocean.com tutorials react axios

React BasicsLaravel Api