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

Question

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

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

我的问题是事件似乎被触发了两次，起初我以为这是 PubSub, which is the library that I was using, so I decided to try another framework (eventemitter3) 的问题，但发生了完全相同的事情，所以我完全迷路了，其他人有类似的问题发现他们的请求实际上被不同的组件触发了两次，我几乎可以肯定这不是这里的问题，当我发出请求时查看日志：

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 是我触发请求的唯一地方，并且网络选项卡确认了这一点，我可以使用任何事件框架甚至完全不同的解决方案，我只需要向用户显示消息，如果有人可以指出我在这里做错了什么对我很有帮助。谢谢大家！

Answer 1

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

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

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

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

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

Events firing twice inside axios interceptor

reactjs

axios

publish-subscribe

interceptor