首页 > 解决方案 > Vuejs 中的每一秒 axios 调用都很慢

问题描述

我正在将 Vuejs 2.6.11 与 Vuex 3.2.0 和 axios v0.19.2 一起使用,并且有一个不同的特殊问题,我也在这个 stackoverflow 问题中报告过:Every Second Vuex Commit to the same action is slow

我已经消除了后端不是问题,因为我正在从 Angular 1 应用程序和其他地方调用相同的后端端点,并且在第一次调用后所有调用都始终快速没有问题。

我还测试了 axios 调用,而没有直接在组件中使用 vuex,但我遇到了完全相同的问题。

下面是我本地组件中的 axios 调用。

 async getDataLocal() {
      // this.showCollapse = !this.showCollapse
      // this.$store.dispatch('getData', {TableId: this.TableId, ViewId: this.ViewId, PageNumber: this.PageNumber, PageSize: this.PageSize })
      await this.$axios
        .$get(
          '/scad/TablesV2/' +
            this.TableId +
            '/data?ViewId=' +
            this.ViewId +
            '&PageNumber=' +
            this.PageNumber +
            '&PageSize=' +
            this.PageSize
        )
        .then(
          response => {
            this.items = response
          },
          error => {
            reject(error)
          }
        )
    },

这是 Chrome 中网络流量的结果。我的通话间隔大约 1 秒。

在此处输入图像描述

下面是我的 vuex 操作的代码。

return new Promise((resolve, reject) => {
      let ParameterList = payload.ParameterList || {}
      vuexContext.commit('loading', true)
      this.$axios
        .$get(
          '/scad/tablesv2/' +
            payload.TableId +
            '/data.json?ViewId=' +
            payload.ViewId +
            '&PageNumber=' +
            payload.PageNumber +
            '&PageSize=' +
            payload.PageSize,
          {
            params: { ParameterList: payload.ParameterList },
            crossdomain: true,
            withCredentials: true
          }
        )
        .then(
          response => {
            const result = {
              TableId: payload.TableId,
              ViewId: payload.ViewId,
              PageNumber: payload.PageNumber,
              PageSize: payload.PageSize,
              data: response
            }
            vuexContext.commit('getData', result)
            resolve(result)
          },
          error => {
            vuexContext.commit('setError', error.response)
            reject(error)
          }
        )
      vuexContext.commit('loading', false)
    })

这是 Chrome 中到同一端点的网络流量。再次间隔 1 秒 在此处输入图像描述

这是从 Angular 1 应用程序到同一端点的网络流量。

在此处输入图像描述

我搜索了互联网,但找不到任何相关内容。

标签: vuejs2axiosvuex

解决方案


我在使用 axios 处理 vue.js 应用程序时遇到了同样的问题。

我发现延迟是由于在 Windows 操作系统上基于 Chromium 的浏览器中使用 localhost 造成的。查看每个网络请求的详细信息时,您可以看到每隔一个 axios 请求就执行一次 DNS 查找。

如果您将地址栏中的 localhost 替换为 127.0.0.1,则延迟将消失。


推荐阅读