前端同一个接口同时被调用两次的原因

最新推荐文章于 2024-06-29 23:13:07 发布

琹箐

最新推荐文章于 2024-06-29 23:13:07 发布

阅读量5.8k

点赞数 1

分类专栏：前端笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_45327886/article/details/127652838

版权

前端同时被 2 个专栏收录

77 篇文章 3 订阅

订阅专栏

笔记

41 篇文章 0 订阅

订阅专栏

一、问题

1.最近写代码遇到了两次这种同一个接口几乎同时被调用两次情况，决定记录一下。

二、场景及解决方法

1.场景一

父组件Parent给子组件Son传参props1，子组件Son只在初始化时能够正确接收到子组件传过来的值props1,之后父组件中的props1的值变化，子组件中接收的props1是会进行响应式更改的。

1）但是我的需求是： 在子组件中知道props1变化，就需要调用函数，进行相应的处理。

我怎么知道 props1什么时候变化了呢？-----watch监听 props1的变化，监听到变化时，做我想做的事情，比如调用函数functionA（里面调用了接口 searchPatient)！！！！！！

2）问题来了：我写好了之后，进入这个页面，发现functionA有时候被调用了两次(接口 searchPatient被调用了两次），并且 props作为接口传参，前后两次调用接口的传参不同，导致两次取到的数据不同。因为两次调用接口，接口的响应时间不同，异步了，最终导致有时取到的数据是正确的，有时取到的数据是错误的！

3）产生问题的原因：想了很久都觉得自己没有问题，父组件传过来值，我在子组件中也只接收了一次并且没有修改过 props1的值，怎么就有两次变化？况且其他页面也有类似的操作，也没有调用两次接口呀！！！

最后发现：竟然是因为我在父组件中给props1赋了两次值。一次是在声明props1变量时赋值为false,一次是在mounted中 因为localStorage中可能存了值，我想判断一下后再给props1赋值。

localStorage中存的是 false的时候,确实只能监听到props1变化了一次；接口只调用一次---没有问题；

localStorage中存的是true的时候，props1从false变成了true,子组件监听懂啊 props1变化了两次，所以接口被调用了两次---有问题。

错误代码如下：

    export default {
        data() {
            return {
                // 是否查看所有
                searchAll: this.initSearchAll(),
            }
        },
        mounted() {
            if (sessionStorage.getItem('isSearchAllPatient')) {
                return JSON.parse(sessionStorage.getItem('isSearchAllPatient'));
            } else {
                sessionStorage.setItem('isSearchAllPatient', false);
                return false;
            }
        }
    }

注：如果不是仔细分析，我也以为没有影响的！！！这也间接证明子组件和父组件几乎是同步加载的。

上述props1是泛指，具体为下面代码中的 searchAll

4）解决方法：

a.方法一：推荐

在初始化变量 searchAll的时候直接调用一个方法赋值就可以了，不要在mounted中再赋值了！！！

正确代码如下：

    export default {
        data() {
            return {
                // 是否查看所有
                searchAll: this.initSearchAll(),
            }
        },
        mothods: {
            // 初始化仅看我的和查看全部
            initSearchAll() {
                if (sessionStorage.getItem('isSearchAllPatient')) {
                    return JSON.parse(sessionStorage.getItem('isSearchAllPatient'));
                } else {
                    sessionStorage.setItem('isSearchAllPatient', false);
                    return false;
                }
            },
        }
    }

b.方法二：

在子组件上加上 v-if=“isShowSon",isShowSon初始化为false等待我在mounted给变量 SearchAll赋值完成后，再加载子组件Son（isShowSon赋值为true).

不推荐，因为使用了多余的变量，且赋值两次。一次赋值就可以解决的问题，不建议画蛇添足。

2.场景二

一个页面有很多患者，当我选择了一个患者后，进入改患者对应的页面，存储了改患者的信息currentOperaMsg；当我回到有很多患者的其他页面，我希望不再存储刚才那个患者的信息。想到可以根据路由来判断我到底要在什么时候置空患者的信息。这一切都看上去很合理，没有问题。

1）但是有一个新的需求是：在单个患者对应的页面，可以切换到其他患者，我必须监听currentOperaMsg的变化才能够重新调页面中的接口；

2）还有另外一个问题：一个患者也对应很多页面我在每个页面都写一个监听到患者变化，然后调用改页面的接口很不合理。----为了简化，想到监听到患者变化时，直接刷新页面，这样只需要在患者所在的每个页面调用一个公共函数reload就可以实现：切换患者时，改患者对应的所有页面都可以刷新。

3）问题来了：上面的看起来都挺合理的，但是却发现当你从某个患者所在的页面切换到所有患者的页面时，所有患者的页面接口都被调用了两次。

4）问题产生的原因：路由变化早于组件的销毁，当路由变化时：所有患者的页面被加载一次，同时判断到切换到所有患者的页面，currentOperaMsg被置为{}；单个患者所在的页面还没有被销毁，监听到 currentOperaMsg的变化，执行reload函数，又加载了一次页面。

5）解决方法

真的有这种需求时，可以在除了单个患者及全部患者以外的路由将 currentOperaMsg置为{}，因为全部患者页面带有 currentOperaMsg相关的信息应该是不影响业务的。

6）根本的解决方法

上述的需求其实是不合理的，我在除了单个患者的页面拥有 currentOperaMsg理论上不会影响其他页面的。而且对于导航式编程而言，点击浏览器的返回按钮后应该正常显示之前的页面。如果真的把currentOperaMsg设置为{}，在上述场景下，点击浏览器左上角的返回按钮后，单个患者页面就没有患者信息了，需要传单个患者信息的接口很可能会报错，如下图所示。这显然是不合理的。