Axios 请求在 VueJs 上进入无限循环

Question

我创建了一个 axios 函数，可以获取图像并将它们显示在网页上。问题是，当 axios 发出请求时，它会进入请求的无限循环并且永不停止。蓝色气泡中的数字一直在快速增加。

我不确定是什么问题。任何帮助将不胜感激。

这是一个在滑块中呈现照片的 Slide 组件

          <Slide
            v-for="(post, index) in getAllInstaPosts"
            :key="index"
            :class="`slide slide-${index}`"
            :aria-hidden="index === 0 ? false : true"
          >

它从计算中的此方法获取信息属性 - 我尝试在此处使用 async 关键字，但编译器一直在抱怨 - 意外的异步

getAllInstaPosts () {
      return (this.item.pdp && this.item.pdp === true) ? this.getInstaPostsForProduct() : this.allInstaPosts
    }

创建请求的方法属性中的此函数。

 getInstaPostsForProduct () { // <- makes a call to foursixty api to fetch insta posts of a certain product
          axios.get(`https://foursixty.com/api/v2/${foursixty.sitename}/timeline/?for_url=https://www.${foursixty.domainName}/${this.$router.currentRoute.path}`)
            .then(response => {
              if (response.status === 200) {
                this.postsForUrl = response.data.results
                console.log('DATA:' + response.data)
              }
            })
            .catch((err) => {
              Logger.error(err);
            })
          return this.postsForUrl;
        }

Answer 1

计算的属性函数必须是同步的。您不能 return 来自异步函数的响应
计算属性应尽可能接近纯函数。创建 side-effects 就像改变数据属性一样会导致无限循环，因为每次它们的任何依赖项发生变化时都会重新计算计算的属性。

解决方案是在您的数据属性中存储状态并在适当的时间更新它，例如当您当前的路线发生变化时

export default {
  data: () => ({
    allInstaPosts: [], // ¯\_(ツ)_/¯
    postsForUrl: [],
    item: {
      pdp: true // ¯\_(ツ)_/¯
    }
  }),
  computed: {
    getAllInstaPosts () {
      return this.item.pdp ? this.postsForUrl : this.allInstaPosts;
    }
  },
  methods: {
    async getInstaPostsForProduct () {
      this.postsForUrl = []; // empty the array
      try {
        const { data: { results } } = await axios.get(
          `https://foursixty.com/api/v2/${foursixty.sitename}/timeline/`,
          {
            params: {
              for_url: `https://www.${foursixty.domainName}/${this.$route.path}`
            }
          }
        );
        this.postsForUrl = results;
      } catch (err) {
        Logger.error(err);
      }
    }
  },
  watch: {
    $route: { // watch for route changes and trigger the request
      immediate: true,
      handler: "getInstaPostsForProduct"
    }
  }
};

Axios 请求在 VueJs 上进入无限循环

Axios request goes into infinite loop on VueJs

javascript

axios

vuejs2