As a newcomer to VueJS, I am exploring how to make a GET request to the GitHub API. Initially, I made a request to sort users by follower count, resulting in an array ordered in descending order of user logins. Following that, I sent another GET request to each login value to retrieve more detailed data such as avatar URL and repository count. However, I encountered a problem due to issues with asynchronicity - some requests completed faster than others, causing my new array of objects to be out of sequence based on followers count. I attempted to use the sort() method, but struggled to determine the execution order of each function in the JavaScript flow. Can anyone offer assistance?
Below are the components I'm using:
Home.vue
<template>
<div>
<div class="header">
<h1>Devfinder</h1>
<p>Find relevant developers from Github</p>
</div>
<div class="main">
<SearchBars :fetchLogins="fetchLogins" />
<CardList :cards="cards" />
</div>
</div>
</template>
<script>
import CardList from "./CardList";
import SearchBars from "./SearchBars";
import axios from "axios";
export default {
name: "Home",
data() {
return {
loginList: [],
cardList: [],
cards: [],
page: 1,
};
},
components: {
SearchBars,
CardList,
},
methods: {
fetchLogins(language, location) {
axios
.get(
`https://api.github.com/search/users?q=location:${location}+language:${language}&sort=followers&order=desc&page=${this.page}&per_page=8`,
{
headers: {
Authorization: "***",
},
}
)
.then((res) => {
console.log(res.data);
this.loginList = res.data.items.map((item) => item.login);
console.log(this.loginList);
})
.catch((err) => console.log(err))
.then(() => this.setCardInfo())
.then(() => this.cards = this.cardList.sort((a,b) => b.followers - a.followers));
},
setCardInfo() {
let newCardsArray = [];
this.cards = [];
this.cardList = [];
// Reset the state of cards and iterate through the loginList array to send a GET request and create objects for the cards array
this.loginList.forEach((login) =>
axios
.get(`https://api.github.com/users/${login}`, {
headers: {
Authorization: "***",
},
})
.then((res) => {
const user = res.data;
const cardObject = {
id: user.id,
name: user.name,
avatar: user.avatar_url,
bio: user.bio,
followers: user.followers,
repositories: user.public_repos,
};
newCardsArray.push(cardObject);
})
);
// Due to asynchronicity, some objects, even with more followers, end up out of order in the array
// Invoke a sort() in descending order
this.cardList = newCardsArray;
},
},
};
</script>
and the SearchBars component
<template>
<div>
<form @submit="onSubmit">
<p>Tech/Lang</p>
<input type="text" v-model="language" placeholder="Type a technology or language" />
<p>Location</p>
<input type="text" v-model="location" placeholder="Type the desired location" />
<input type="submit" value="FIND" />
</form>
</div>
</template>
<script>
export default {
name: "SearchBars",
data() {
return {
language: '',
location: ''
}
},
methods: {
onSubmit(e){
e.preventDefault();
this.fetchLogins(this.language, this.location);
}
},
props:["fetchLogins", "getCardInfo"]
};
</script>