1

I have an application that uses JavaScript with Vue.js for the front-end and PHP with Laravel for the back-end.

Right now, when I make a GET request from my front-end to my back-end on URL /getSummoner/{summonerName}, I make another GET request from my back-end to a third party API in order to get the details for a user with a certain summoner name like this:

public function getSummoner($summonerName){

        $summoner = Summoner::where('summoner_name', $summonerName)->first();

        if ($summoner === null) {
            $apiKey = env("RIOT_API_KEY");
            $region = env("EUW");

            $getSummonerInfo = file_get_contents($region . "/lol/summoner/v4/summoners/by-name/" . $summonerName . "?api_key=" . $apiKey);
            $summonerInfo = json_decode($getSummonerInfo);

            $summoner = new Summoner();
            $summoner->summoner_name = $summonerName;
            $summoner->summoner_info = json_encode($summonerInfo);

            $summoner->save();
        } else {
            $summonerInfo = json_decode($summoner->summoner_info);
        }

        return response()->json([
            'summonerInfo' => $summonerInfo,
        ], 201);

}

And then I return a JSON response to my front-end with the summoner info. This all works fine and dandy as long as a user with that summoner name exists. If he doesn't exists, the GET request fails so the rest of my function fails and in return I get an error on my front-end.

So I am wondering what am I supposed to do to get a 404 page on the front-end if my back-end GET request doesn't go through? Both on the front and back-end. I assume I need to return some sort of response from the back-end and then based on that response do something on the front-end?

Here's my front-end:

<template>
    <div>{{ summonerInfo }}</div>
</template>

<script>
import axios from 'axios'
import router from '../router'

export default {
    data(){
        return {
            summoner: this.$route.params.summonerName,
            summonerInfo: '',
        }
    },
    methods: {
        user(action){
            let trimmedSummoner = this.summoner.replace(/\s+/g, '');
            axios.get('/' + action + 'Summoner/' + trimmedSummoner)
            .then((response) => {
                this.summonerInfo = response.data.summonerInfo
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    },
    watch:{
        $route (to, from){
            this.summoner = this.$route.params.summonerName
            this.user('get')
        }
    },
    mounted(){
        this.user('get')
    }
}
</script>
Onyx
  • 5,186
  • 8
  • 39
  • 86

1 Answers1

2

One poor mans way of doing this would be to wrap your request in a try / catch. This way, when you request fails, you have the opportunity to catch it and redirect. Downside to this method is that it doesn't give you any info on what the status code is (4xx vs 5xx, etc...).

However, a proper solution would be to use Http Interceptors to handle this.

How can you use axios interceptors?

Here is another example using try / catch approach:

https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253

They've also got quite a few examples on this within their GitHub Docs:

https://github.com/axios/axios

Interceptor Example:

axios.interceptors.response.use((response) => {
    if(response.status === 401) {
         alert("You are not authorized");
    }
    return response;
}, (error) => {
    if (error.response && error.response.data) {
        return Promise.reject(error.response.data);
    }
    return Promise.reject(error.message);
});
mwilson
  • 12,295
  • 7
  • 55
  • 95
  • So if the GET request on the back-end fails, I return a 404 response to my front-end, intercept that 404 and redirect to a 404 view? – Onyx Aug 29 '19 at 23:23
  • Yea, so the http interceptor essentially is your "centralized error / success handler". There, you can tell it what to do based on an error code. So maybe for `401` or `403` you want to redirect to login page. For `500` you may want to redirect to an `oops... something went wrong page`, etc... Pretty standard – mwilson Aug 29 '19 at 23:25
  • Another use case for interceptors is to automatically include `HttpHeaders` or other stuff in each request. All kinds of stuff you can do with it. – mwilson Aug 29 '19 at 23:28