Question

我正在尝试让wp-rest和Vuejs 2一起工作，到目前为止，除了这一个休息调用之外，还有很多东西正在进行，这需要另一个设计完成请求。基本上我希望能够迭代/循环第一个请求并动态更改第二个请求的更新。

我的第二个问题是性能，总体而言其余的调用需要更长的时间来加载 - 我可以做些什么来优化？

上下文：第一个结果数据给了我一个id，slug和title我要在主页上显示的所有帖子作为特色 - 通过id或slug我想将它传递给第二个请求 - 所以我可以提取更多关于这些帖子 - 如特色图片和其他元数据。

<pre>export default {
  name: 'work',
  data () {
    return {
      loading: false,
      page: null,
      pagesingle: null,
      error: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.$http.get('/cms/wp-json/wp/v2/pages/?slug=work&_embed')
        .then(result => { 
           this.page = result.data   
           this.$http.get('/cms/wp-json/wp/v2/cases-studes/?slug=case-study-name').then(
               result => this.pagesingle = result.data
             );
         })
    }
  }
}</pre>

Answer 1

我想你想看看Promise.all。它需要一系列的承诺，等待它们全部完成，然后用一系列结果解决。

您将根据第一个请求中的slug和id数组构建promise数组。也许像是

const promises = result.data.articles.map((article) =>
    this.$http.get(`/cms/wp-json/wp/v2/cases-studies/?slug=${encodeURIComponent(article.slug)}`)
);

获得结果就像

一样简单

Promise.all(promises).then((results) => {
    this.arrayOfSinglePages = results.map((result) => result.data);
});

现在，您的this.page包含id（和东西）数组，this.arrayOfSinglePages的每个网页的详细信息都按照相同的顺序排列。

vue js 2 - for循环多次休息调用fetchData

1 个答案: