vue js 2 - 多个rest调用中的for循环fetchData

Question

我试图让 wp-rest 和 Vuejs 2 一起工作，到目前为止，除了需要另一个请求才能完成设计的休息调用之外，事情进展顺利。本质上，我希望能够遍历/循环第一个请求并动态更改更新第二个请求。

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

上下文： 第一个结果数据为我提供了我只想在主页上显示为特色的所有帖子的 id、slug 和标题 - 通过该 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。它需要一组 promise，等待它们全部完成，然后用一组结果解析。

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

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 拥有它们各自的页面详细信息，顺序相同。