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拦截器来处理此问题。

How can you use axios interceptors?

这是使用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);
});

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

1 个答案: