Question

在以正确的顺序将数据推入数组时遇到了问题，我使用$http.get()内置的Vue来获取数据：

我在数据对象中定义了this.contacts，我有以下两种方法，一种方法是获取一些数据以确定要提取的联系人，而另一种方法则获取那些联系人。初始获取如下：

this.$http.get(this.baseUrl + '/wp-json/wp/v2/pages?slug=' + menuChildSlug).then(async response => {
  this.page = response.data[0]
  this.pageSections = this.page.acf.sections
  this.contactSections = this.page.acf.contacts
  for (let contact of this.contactSections) {
    let result = await this.fetchContactPostById(contact.add_contact.ID)
  }
}).catch(e => {
  this.errors.push(e)
})

此访存所依赖的方法如下：

fetchContactPostById: async function (postId) {
  this.$http.get(this.baseUrl + '/wp-json/acf/v3/contacts-api/' + postId).then(async response => {
    response.data.acf.id = postId
    let result = await this.contacts.push(response.data)
    return result
  }).catch(e => {
    this.errors.push(e)
  })
},

我觉得我的async / await语法已经与我的箭头函数=>混为一谈，但是似乎返回的响应已按预期发生，但push本身并没有按预期发生...任何专业提示将不胜感激！

Answer 1

在async/await中，您实际上根本不需要fetchContactPostById，因为只使用了一种异步方法，并且它返回一个Promise

您需要做的是return this.$http.get(....，然后删除所有异步和等待关键字

fetchContactPostById: function (postId) {
    return this.$http.get(this.baseUrl + '/wp-json/acf/v3/contacts-api/' + postId)
    .then(response => {
        response.data.acf.id = postId;
        let result = this.contacts.push(response.data);
        return result;
    }).catch(e => {
        this.errors.push(e);
    })
},

顺便说一句

return result-您是否理解它返回一个数字（数组的新长度），并且调用代码分配了该值，但从未实际使用它？

简化后的代码将是

this.$http.get(this.baseUrl + '/wp-json/wp/v2/pages?slug=' + menuChildSlug).then(async response => {
      this.page = response.data[0];
      this.pageSections = this.page.acf.sections;
      this.contactSections = this.page.acf.contacts;
      for (let contact of this.contactSections) {
        await this.fetchContactPostById(contact.add_contact.ID);
      }
}).catch(e => {
    this.errors.push(e)
})

和

fetchContactPostById: function (postId) {
    return this.$http.get(this.baseUrl + '/wp-json/acf/v3/contacts-api/' + postId)
    .then(response => {
        response.data.acf.id = postId;
        this.contacts.push(response.data);
    }).catch(e => {
        this.errors.push(e);
    })
},

Answer 2

您以特定顺序调用数据，但最终将以不同顺序接收响应。（取决于服务器的响应方式，这就是调用异步的原因）。如果要在第二个数组中保持相同的顺序，则必须将第一个数组的索引发送到第二个数组。

在Vue.js中将值异步推送到数组

2 个答案: