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

Posted 2023-02-22

【中文标题】vue js 2 - 多个rest调用中的for循环fetchData

【英文标题】：vue js 2 - for loop in multiple rest calls fetchData

【发布时间】：2017-07-30 02:26:07

【问题描述】：

我试图让 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>

【问题讨论】：

第二个请求依赖第一个请求呢？

嘿 Roy，谢谢您的回复 - 我希望第二个请求使用第一个请求中的参数。 ('/cms/wp-json/wp/v2/cases-studes/?slug=dynamic-case-study-name-based-on-the-first-request-iteration

第一个可以迭代的请求来自什么？如果您拨打多个电话并将他们的所有结果分配给this.pagesingle，他们只会互相覆盖。你想对多个结果做什么？请编辑您的问题以使您的问题更清楚。

刚刚更新了我的问题 :)

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

【讨论】：

Roy 我有一个类似的问题...请您快速浏览一下 - ***.com/questions/47195367/…