Обещания возвращаются непредсказуемым образом через $ emit ('fetch', resol))

Question

Иногда this.companies будет получать обновления, иногда нет:

parent component

   fetchCompanies (resolve) {
      this.$store.state.backend
        .get('/jobBuilder/company/all')
        .then(ret => {
          console.log('companies fetched')
          this.companies = ret.data
          if(resolve){
            resolve('resolved')
          }
        })
        .catch(error => console.error(error))
    }

child component

    toggleActivation (button, company) {
      button.disabled = true

      let fetch = new Promise((resolve) => this.$emit('fetch', resolve)) //which activated fetchCompanies in parent

      this.$store.state.backend
        .post('/admin/update-activation/company', {
              id: company.id,
              active: !company.active
        })
        .then(() => fetch)
        .catch(err => alert(err))
        .finally(() => button.disabled = false) 
    }

И я не уверенпочему, но вызовы API не в том порядке, в котором они мне нужны:

companies fetched
XHR finished loading: GET "http://localhost/jobBuilder/company/all"
companies watch activated
resolved
XHR finished loading: POST "http://localhost/admin/update-activation/company"

где это должно быть на самом деле:

XHR finished loading: POST "http://localhost/admin/update-activation/company"
XHR finished loading: GET "http://localhost/jobBuilder/company/all"
companies watch activated
companies fetched
resolved

Я не уверен, что делаюнеправильно и почему иногда это работает, а иногда нет.

Answer 1

Вы можете попробовать это, что в основном отправляет обратный вызов в качестве параметра для события fetch:

/**
 * @param {Object} button
 * @param {Object} company
 */
toggleActivation(button, company) {
    this.$emit('fetch', () => {
        // NOTE HERE: we wrap this call in its own function,
        // because if we do not, the promise gets executed and its result is sent.
        this.storeCompany(company);
    });
},
/**
 * @param {Object} company
 * @return {Promise}
 */
storeCompany(company) {
    return this.$store.state.backend
        .post('/admin/update-activation/company', {
              id: company.id,
              active: !company.active
        });
}

Тогда ваш родительский компонент может сделать:

/**
 * @param {Function} after
 * @return {Promise}
 */
fetchCompanies(after) {
    return this.$store.state.backend
        .get('/jobBuilder/company/all')
        .then(after);
}

Если выпомните, что нужно создавать небольшие управляемые фрагменты кода (например, всегда возвращая Promise из функции), вы можете сделать его более понятным и проще связать их вместе.