Как в Axios (в Vue) вызвать пользовательскую функцию в случае успеха (см. код)?

Question

[Роман]

Это простой код для примера, я пытаюсь сделать так:

<button @click="get">Get API...

...

methods: {
    lg() {
      console.log("Log 1");
    },
    lgt() {
      console.log("Log 2");
    },
    get() {
      this.axios
        .get("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(function(response) {
          console.log(response);
          this.lg();
        });
    },
  }

Но оно мне пишет:

Uncaught (in promise) TypeError: Cannot read property 'lg' of undefined at eval

Какие есть пути решения этой проблемы?

Мне нужно чтобы в случае успешного получения данных, запускались другие, определенные мной, функции (в примере: lg() и lgt()) - как это сделать?

То есть, данные через API оно получает, но мои функции - не видит, и, соответственно, не запускает.

Хотя например это:

methods: {
    lg() {
      console.log("Log 1");
      this.lgt();
    },
    lgt() {
      console.log("Log 2");
    },

работает как и положено: выводит в консоль "Log 1" и "Log 2" - а если в промисе - не видит...

Answer 1

[no_one_safe]

Вам нужно использовать стрелочные функции

get() {
      this.axios
        .get("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(response => {
          console.log(response);
          this.lg();
        });
    },

Comments

[Роман]

это работает! спасибо!

Answer 2

[Владимир Коротенко]

get() {
      const self = this;
      this.axios
        .get("https://api.coindesk.com/v1/bpi/currentprice.json")
        .then(function(response) {
          console.log(response);
          self.lg();
        });
    },

Comments

[Роман]

прикольно) работает. спасибо!

[Константин Б.]

Роман, так уже не делают

[Роман]

Константин Б., ну, да, я уже понял что тут суть в области видимости, а ниже есть другой ответ со стрелочными функциями. Работают оба способа. Спасибо!

[Владимир Коротенко]

Константин Б., Вы не коммент написали а кликбейтный и провокационный вброс.
Дополните почему не делают, как правильно, по вашему мнению, и в каких случаях стоит использовать этот синтаксис а когда предложенный вами.
Dude peace

[Константин Б.]

Владимир Коротенко, елементарно, удобство, с увеличением количества компонентов приложения увеличивается количество объявляемых ненужных переменных. Вы написали для одного примера, а если бы 1000? Представьте, тысячу раз вы бы написали const self = this;
И делать это нужно в каждом вашем методе где нужен контекст родителя

Короткий синтаксис без лишнего мусора позволяет писать более красивый код.

[Владимир Коротенко]

Константин Б., Что делать если не завезли ES2015 ?

https://kangax.github.io/compat-table/es6/

Вот например кусок ТЗ

3. SYSTEM REQUIREMENTS (OS, BROWSER, PLATFORM’S)
1. Cloud portal: latest of available, AZURE DevOps portal
2. Client Side Requirements: Safari, Chrome, FireFox – last 2 versions, Internet Explorer 11
3. Test account for access to DevOps Services REST API endpoints (With read permission)
4. Test account for access to Dynamics 365 (Administrative permissions )
5. Test data on system

Answer 3

[Константин Б.]

Это называется контекст выполнения функции. По умолчания в обычных функциях свой this, поэтому в нем нет вашего метода.вариантов два, писать объявляя контекст до функции, либо использовать стрелочные функции

.then((response) => {
          console.log(response);
          this.lg();
});