Question

我正在尝试使用 axios 实现拦截器，因此每次我收到来自请求的响应时，它都会检查它是否包含“msg”字段，如果有，它应该向用户显示消息。

为此，我在 axios 中实现了一个拦截器，这个拦截器应该在每次收到响应时触发一个事件，然后 App.js 将监听这个事件以显示适当的消息。

我的问题是事件似乎被触发了两次，起初我认为这是PubSub的问题，这是我使用的库，所以我决定尝试另一个框架（{{ 3}}) 并且发生了完全相同的事情，所以我完全迷失了，其他遇到类似问题的人发现他们的请求实际上被不同的组件触发了两次，我几乎可以肯定这不是问题在这里，当我提出请求时查看日志：

interceptor > Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
intercepted by eventemitter3 > Object { data: null, msg: "Usuário não encontrado", success: true }
intercepted by eventemitter3 > Object { data: null, msg: "Usuário não encontrado", success: true }
intercepted by pubsub > Object { data: null, msg: "Usuário não encontrado", success: true }
intercepted by pubsub > Object { data: null, msg: "Usuário não encontrado", success: true }

请注意，有一个“拦截器”日志，这意味着只拦截了一个请求，然后为 eventemitter3 触发了一个事件，为 pubsub 触发了一个事件。浏览器的网络选项卡只显示一个 POST 和一个 OPTIONS 请求。这是我的 axiosInstance：

import Axios from 'axios';
import PubSub from 'pubsub-js'
import Emitter from './EventHandler';

export const axios = Axios.create({
    baseURL: "http://localhost/api"
})

axios.defaults.headers.common['Authorization'] = localStorage.getItem('jwt') || "";

axios.interceptors.response.use(function (response) {
    console.log("interceptor",response)
    Emitter.emit('RESPONSE_INTERCEPTED', response.data);
    PubSub.publish('RESPONSE_INTERCEPTED', response.data);
    return response;
}, function (error) {
    return Promise.reject(error);
});

这里是我监听事件的 App.js：

export default function App() {
    const alert = useAlert()

    Emitter.on('RESPONSE_INTERCEPTED', (data) => {
        console.log("intercepted by eventemitter3", data)
        alert.show(data.msg)
    });

    var responseNotifier = function (msg, data) {
        if(data.msg){
            console.log("intercepted by pubsub", data)
        }
    };

    var token = PubSub.subscribe('RESPONSE_INTERCEPTED', responseNotifier);

    return (
        <Router>
            <div>
                <Switch>
                    <Route path="/sobre"><Sobre /></Route>
                    <Route path="/memorias"><Memorias /></Route>
                    <Route path="/login"><Login /></Route>
                </Switch>
            </div>
        </Router>
    );
}

以防万一，这里是 eventemitter3 的 EventHandler：

import EventEmitter from 'eventemitter3';

const eventEmitter = new EventEmitter();

const Emitter = {
    on: (event, fn) => eventEmitter.on(event, fn),
    once: (event, fn) => eventEmitter.once(event, fn),
    off: (event, fn) => eventEmitter.off(event, fn),
    emit: (event, payload) => eventEmitter.emit(event, payload)
}

Object.freeze(Emitter);

export default Emitter;

以及发出请求的代码：

    login(){
        axios.post('/login', {
            "username": this.state.username,
            "password": this.state.password
        }).then((resp)=>{
            // console.log(resp)
        })
    }

我在这里真的一无所知，我在 SO/Google 上发现的所有内容都指出请求被触发两次，但整个应用程序仍处于开始阶段，代码 aboce 是我触发请求的唯一 plaec，而网络选项卡确认了这一点，我可以使用任何事件框架甚至完全不同的解决方案，我只需要向用户显示消息，如果有人可以指出我在这里做错了什么这对我有很大帮助.谢谢大家！

Answer 1

这里的问题不是事件触发两次，而是被监听两次。

var token = PubSub.subscribe('RESPONSE_INTERCEPTED', responseNotifier);

这段代码运行了两次，可能是因为组件重新渲染（虽然不确定）所以每次触发一次事件时，都会有两个监听器做完全相同的事情。您可以通过使用钩子 componentDidMount 添加您的侦听器来解决此问题。由于您使用的是功能组件，您可以这样做：

useEffect(()=>{
    var token = PubSub.subscribe('RESPONSE_INTERCEPTED', responseNotifier);
})

在 axios 拦截器中触发两次事件

1 个答案: