Почему это обещание не разрешается обратно звонящему?

Question

Почему это обещание не разрешается обратно звонящему?

1

У меня есть Vue-приложение, которое работает с Vuex и Axios. В этом приложении у меня есть vuex-store, который обрабатывает API-вызовы, но проблема в том, что когда я вызываю действия хранилища, я не могу передать ответ в вызывающем. Все идеи, что я делаю неправильно?

Код звонка:

import { FETCH_PRODUCTS, ADD_PRODUCT } from './actions.type'

methods: {
    sendNewProduct () {
      this.$store
        .dispatch(ADD_PRODUCT, this.newProductForm)
        .then(() => {
          console.log('This never gets called')
        })
    }
  }

Vuex-магазин:

const actions = {
  [ADD_PRODUCT] (context, credentials) {
    return new Promise((resolve) => {
      ApiService
        .post('/Products/', {
          Name: credentials.Name,
          Description: credentials.Description,
          Price: credentials.Price
        })
        .then(({ data }) => {
          this.$store
            .dispatch(FETCH_PRODUCTS)
            resolve(data)
        })
        .catch(({ response }) => {
          console.log(response)
          context.commit(SET_ERROR, 'Error adding product')
        })
    })
  }
}

klas mack 20 окт. 2018, в 23:49

Источник

3

Выглядит, как явный антипаттерн конструкции Promise, хотя цепочка Promise выглядит правильно связанной, я думаю
CertainPerformance 20 окт. 2018, в 20:51
2

Кроме того, это никогда не разрешает (или отклоняет) в случае ошибок.
robertklep 20 окт. 2018, в 20:53
0

[ADD_PRODUCT] (context, credentials) { это опечатка? после имени ключа нет двоеточия
Andy Ray 20 окт. 2018, в 20:55
0

Я установил файл для всех действий, чтобы избежать волшебных строк, вероятно, следует включить его :-) Обновит код. Как мне избежать этого антипаттерна? Обещания и javascript не являются новыми для меня.
klas mack 20 окт. 2018, в 20:58
1

stackoverflow.com/questions/23803743/...
trincot 20 окт. 2018, в 21:08

Показать ещё 3 комментария

Теги:

javascript

vue.js

vuejs2

vuex

axios

1 ответ

Ещё вопросы

Выглядит, как явный антипаттерн конструкции Promise, хотя цепочка Promise выглядит правильно связанной, я думаю
Кроме того, это никогда не разрешает (или отклоняет) в случае ошибок.
[ADD_PRODUCT] (context, credentials) { это опечатка? после имени ключа нет двоеточия
Я установил файл для всех действий, чтобы избежать волшебных строк, вероятно, следует включить его :-) Обновит код. Как мне избежать этого антипаттерна? Обещания и javascript не являются новыми для меня.

Bob Fanger · Accepted Answer · 2018-10-20T19-11-00.000Z

const actions = {
  [ADD_PRODUCT](context, credentials) {
    return ApiService.post("/Products/", {
      Name: credentials.Name,
      Description: credentials.Description,
      Price: credentials.Price
    })
      .then(({ data }) => {
        this.$store.dispatch(FETCH_PRODUCTS);
        return data;
      })
      .catch(({ response }) => {
        console.log(response);
        context.commit(SET_ERROR, "Error adding product");
        throw new Error("Error adding product");
      });
  }
};

Я удалил new Promise(...) потому что axios уже создает обещание. Если добавилось return data в then обратный вызов и бросок в catch обратного вызова, чтобы позволить вызывающему апи получить данные/ошибки.

Обратите внимание, что обещание разрешается до завершения FETCH_PRODUCTS, чтобы убедиться, что действие также завершено, вы должны написать:

.then(({ data }) => {
  return this.$store.dispatch(FETCH_PRODUCTS)
    .then(() => data);
})

Спасибо за ваш ответ. Это работает действительно хорошо!