1

Пытаюсь разобраться с axios, обёрнутым в snotify в своём проекте на VueJS. Нашёл пример того, как можно поместить одно в другое, но возникает проблема - как в случае успеха или ошибки выполнить тот или иной код. Ведь внутри Promise и внутри axios я не могу обратиться ко внешним функциям vue. Как быть?

Ниже код запроса axios к api axios.post('samples',this.sample) перед этим обернутый в Promise для того, чтобы snotify (показывает сообщения пользователяю) во время выполнения запроса анимировал сообщение, что идёт запрос. Когда запрос завершён успешно, внутри axios вызывается resolve - отображается сообщение об успехе. Если ошибка, то она отлавливается и выводится сообщение, описанное в reject.

Мне же нужно не просто показать сообщение об успехе или ошибке пользователю, мне помимо всего прочего нужно произвести кое-какие действия в том и другом случае. Например, если запрос состоялся, то выводится сообщение об успехе и вызывается функция this.test(); Однако я получаю ошибку - функция не вызывается.

<template>
    <button type="button" class="btn btn-primary" @click="createSample">
        Добавить образец
    </button>      
</template>

Скрипт:

  export default {
    name: "sample",
    data() { return { sample: {} } },
    methods: {
      test() {
        console.log('it works!');
      },
      createSample() {
        this.$snotify.async('Called with promise', 'Success async', () => {
          return new Promise((resolve, reject) => {
            return axios.post('samples', this.sample)
              .then(function(success) {
                success = success.data;
                console.log(success); //Ответ сервера отображается. В БД данные есть.
                this.test(); //Ошибка. Не может выполнить функцию. Вызывается reject
                resolve({
                  title: 'Успех',
                  body: 'Новый образец добавлен',
                  config: { closeOnClick: true }
                });
              })
              .catch(function(error) {
                reject({
                  title: 'Ошибка',
                  body: 'Что-то пошло не так',
                  config: { closeOnClick: true }
                })
              });
          });
        });
      },
    }
  }

Рабочий пример на jsfiddle прилагается.

8
  • Лично я не совсем понял, что не так. Можете более детально описать, какой код выполнить и где? Думаю, это поможет хотя бы понимать вопрос. 20 июн 2018 в 21:21
  • @DenisBubnov Обновил вопрос. Добавил рабочий пример проблемы на fiddle
    – n.osennij
    21 июн 2018 в 9:34
  • Скажите, почему вы в одном месте написали (resolve, reject) => {, а в другом - function(success) {? 22 июн 2018 в 7:08
  • 1
    Возможный дубликат вопроса: Потеря контекста вызова 22 июн 2018 в 7:09
  • 1
    @PavelMayorov потому что это один из примеров в документации - artemsky.github.io/vue-snotify/documentation/essentials/… раздел Async
    – n.osennij
    22 июн 2018 в 7:46

1 ответ 1

1

Вам просто нужно пробросить this внутрь функции промиса. Ваш HTML остается без изменений, таким как и был ранее:

<div id="app">
    <button type="button" class="btn btn-primary" @click="createSample">
            Добавить образец
        </button>   
   <vue-snotify></vue-snotify>
</div>

Вот JS немного поменяется (за основу взят ваш код из JsFiddle):

const app = new Vue({
  el: '#app',
  methods: {
    test() {
      console.log('it works!');
    },
    createSample() {
      this.$snotify.async('Called with promise', 'Success async', () => {
        return new Promise((resolve, reject) => {
          return axios.get('https://jsonplaceholder.typicode.com/users')
            .then(function(success) {
              success = success.data;
              console.log(success); // Ответ сервера
              this.test(); // После того, как сделали bind(this) - ошибки не будет
              resolve({
                title: 'Успех',
                body: 'Новый образец добавлен',
                config: {
                  closeOnClick: true
                }
              });
            }.bind(this)) // вот тут мы пробросили this внутрь
            .catch(function(error) {
              reject({
                title: 'Ошибка',
                body: 'Что-то пошло не так',
                config: {
                  closeOnClick: true
                }
              })
            });
        });
      });
    },
  }
});

Все решилось с помощью добавления .bind(this) к функции, которая выполняется внутри then. Если не выполнить bind, то this внутри функции - это всего лишь область функции.


Также, есть еще более простой вариант - это стрелочная функция. Стрелочные функции при создании привязываются к текущему значению this. Поэтому код станет немного современнее и проще (на примере then, где вызывается функция test):

.then((success) => {
    success = success.data;
    console.log(success); // Ответ сервера 
    this.test(); // Можем выполнить эту функцию
    resolve({
        title: 'Успех',
        body: 'Новый образец добавлен',
        config: {
            closeOnClick: true
        }
    });
})
2
  • А не лучше ли стрелочную функцию использовать вместо bind? 22 июн 2018 в 7:07
  • @PavelMayorov хм... а вот как-то не пришло в голову сразу... дополню ответ и этим вариантом, он покрасивше и проще будет. 22 июн 2018 в 7:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.