如果由于用户不存在而导致对API的后端GET请求失败，如何显示404页面？ 前端和后端分离

Question

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>

Answer 1

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);
});