如果由於用戶不存在而導致對API的后端GET請求失敗，如何顯示404頁面？ 前端和后端分離

Question

我有一個將JavaScript與Vue.js一起用於前端，將PHP與Laravel一起用於后端的應用程序。

現在，當我從前端到后端通過URL /getSummoner/{summonerName}發出GET請求時，我從后端向第三方API發出了另一個GET請求，以獲取有關的詳細信息具有特定召喚者名稱的用戶，如下所示：

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

}

然后，我將帶有召喚者信息的JSON響應返回到我的前端。 只要存在具有該召喚者名稱的用戶，這一切都可以正常工作。 如果他不存在，那么GET請求將失敗，因此我的其他功能也會失敗，並且作為回報，我的前端會出現錯誤。

所以我想知道如果我的后端GET請求沒有通過，我應該怎么做才能在前端獲得404頁面？ 在前端和后端。 我假設我需要從后端返回某種響應，然后根據該響應在前端執行某些操作？

這是我的前端：

<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

一個窮人的方法是將您的請求包裝在try / catch 。 這樣，當您的請求失敗時，您就有機會捕獲並重定向。 這種方法的缺點是它不會為您提供有關狀態碼是什么的任何信息（4xx與5xx等）。

但是，一種適當的解決方案是使用Http Interceptor來處理此問題。

如何使用axios攔截器？

這是另一個使用try / catch方法的示例：

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

他們在GitHub Docs中也有很多關於此的示例：

https://github.com/axios/axios

攔截器示例：

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