Не работает асинхрнонная функция при иморте в js?

Question

[Артем Лукьянов]

Есть кусок кода:

const request = {
  get: url =>
    axios
      .get(API(url))
      .catch(err => console.log(err))
      .then(responseBody)
};

const Reviews = {
  all: () => request.get('/comments')
};

Если использовать Reviews.all() в том же файле , где он определен - все ок, но если это импортнуть в другой .js, ничего не работает, возвращает undefined. В чем может быть проблема?

Answer 1

[Роман]

Все должно работать. Скорее всего вы не правильно импортируете/экспортируете ваш Reviews.

Приведите пожалуйста примеры вашего кода:
1. где вы производите экспорт Reviews
2. где вы подключаете модуль с Reviews
3. где вы вызываете Reviews.all(...)

ошибка в одном из этих кусков кода.

и хотелось бы увидеть содержимое функции responseBody для того чтобы смоделировать вашу ситуацию.

ЗЫ: как это обычно и бывает, проблема в невнимательности (тоже иногда этим грешу)))
res.body неопределен, вот и возвращает undefined

замените в файле agent.js
const responseBody = res => res.body;

на
const responseBody = res => res.data;

вот пример

agent.mjs

import axios from 'axios';

const API_ROOT = 'http://api.startgiven.ru:8080/stargiven-1.0/api';
const API = api => `${API_ROOT}${api}`;

const responseBody = res => res.data;

const handleError = err => {
  if (err && err.response && err.response.status === 401) authStore.logout();
};

const request = {
  get: url =>
    axios
      .get(API(url))
      .catch(err => console.log(err))
      .then(responseBody)
};

const Reviews = {
  all: () => request.get('/comments')
};

export { Reviews };

test.mjs

import { Reviews } from './agent.mjs';

console.log("test1:", Reviews );
console.log("test2:", Reviews.all().then(a=>{
    console.log("test3:", a);
}) );

результат выполнения

$ node --experimental-modules test.mjs 
(node:2668) ExperimentalWarning: The ESM module loader is experimental.
test1: { all: [Function: all] }
test2: Promise { <pending> }
test3: [
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 10,
    lastName: 'Иванов',
    rate: 5,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 11,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 12,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 13,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 14,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 15,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 16,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 17,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 18,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  }
]

Comments

[Артем Лукьянов]

Работаю с mobx.
Код:

import mobx, { observable, action } from 'mobx';
//import { Reviews } from '../agent';
import axios from 'axios';

const responseBody = res => res.data;

const API_ROOT = 'http://api.startgiven.ru:8080/stargiven-1.0/api';
const API = api => `${API_ROOT}${api}`;

const request = {
  get: url =>
    axios
      .get(API(url))
      .catch(err => console.log(err))
      .then(responseBody)
};

const Reviews = {
  all: () => request.get('/comments')
};

class SiteStore {
  @observable reviews = [];

  @action setReviews(payload) {
    this.reviews = payload;
  }

  @action async fetchReviews() {
    Reviews.all().then(reviews => this.setReviews(reviews));
  }
}

export default SiteStore;

agent.js:

import axios from 'axios';

const API_ROOT = 'http://api.startgiven.ru:8080/stargiven-1.0/api';
const API = api => `${API_ROOT}${api}`;

const responseBody = res => res.body;

const handleError = err => {
  if (err && err.response && err.response.status === 401) authStore.logout();
};

const request = {
  get: url =>
    axios
      .get(API(url))
      .catch(err => console.log(err))
      .then(responseBody)
};

const Reviews = {
  all: () => request.get('/comments')
};

export { Reviews };

Собственно вызов в fetchReviews().

[Роман]

Артем Лукьянов, как я и написал, все должно работать.

Далее рабочий тест-пример. Тестил на nodejs 12.10 с флагом --experimental-modules. Это накладывает на использование модулей следующие требования:

To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Итак, созданы 2 файла лежащие в одной папке

$ ls
agent.mjs  test.mjs

со следующим содержимым:

agent.mjs

console.log("in module ...");


const func = function() {
   console.log("in function ...");
   
   let promise = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("Ok");
        },1000);
   });
   return promise;
}

const Reviews = {
  all: () => func()
};

export { Reviews };

test.mjs

import { Reviews } from './agent.mjs';

console.log("test1:", Reviews );
console.log("test2:", Reviews.all().then(a=>{
    console.log("test3:", a);
}) );

при попытке выполнить test.mjs получаем следующее:

$ node --experimental-modules test.mjs 
(node:6952) ExperimentalWarning: The ESM module loader is experimental.
in module ...
test1: { all: [Function: all] }
in function ...
test2: Promise { <pending> }
test3: Ok

то есть все работает как надо.

На мой взгляд у вас может быть одна из следующих ошибок:
1. не верно указан путь к agent.js при импорте
2. если для поддержки ES6 модулей вы пользуетесь нодой с флагом --experimental-modules то либо дайте вашим файлам расширение .mjs либо укажите для agent.js "type": "module" в его package.json
3. если для поддержки ES6 модулей вы пользуетесь babel то должно работать (если нет ошибки из П.1)

[Артем Лукьянов]

С импортом все правильно, я для теста в Reviews засунул функцию log: () => console.log('test') и она работает. Не понимаю что не так

[Павел Диденко]

Артем Лукьянов, код прям именно тот, который вы выложили? Там импорт Reviews закомментирован же

[Артем Лукьянов]

Павел Диденко его я само собой раскомментировал

[Артем Лукьянов]

Павел Диденко, Нашел решение проблемы наконец-то! )
Вот тут похожий вопрос, проблема была в ресолве промиса Почему не работает промис?
Но непонятно почему без импорта тогда все работает

[Павел Диденко]

Артем Лукьянов, без импорта работает потому что у вас теряется контекст, копайте в эту сторону

[Роман]

Павел Диденко, Артем Лукьянов, нет там никакой потери контента, есть просто невнимательность

res.body у вас неопределен, вот и возвращает undefined

замените в файле agent.js
const responseBody = res => res.body;

на
const responseBody = res => res.data;

вот пример

agent.mjs

import axios from 'axios';

const API_ROOT = 'http://api.startgiven.ru:8080/stargiven-1.0/api';
const API = api => `${API_ROOT}${api}`;

const responseBody = res => res.data;

const handleError = err => {
  if (err && err.response && err.response.status === 401) authStore.logout();
};

const request = {
  get: url =>
    axios
      .get(API(url))
      .catch(err => console.log(err))
      .then(responseBody)
};

const Reviews = {
  all: () => request.get('/comments')
};

export { Reviews };

test.mjs

import { Reviews } from './agent.mjs';

console.log("test1:", Reviews );
console.log("test2:", Reviews.all().then(a=>{
    console.log("test3:", a);
}) );

результат выполнения

$ node --experimental-modules test.mjs 
(node:2668) ExperimentalWarning: The ESM module loader is experimental.
test1: { all: [Function: all] }
test2: Promise { <pending> }
test3: [
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 10,
    lastName: 'Иванов',
    rate: 5,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 11,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 12,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 13,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'Все круто, очень. Молодцы!',
    email: '[e-mail]',
    firstName: 'Иван',
    id: 14,
    lastName: 'Иванов',
    rate: 6,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 15,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 16,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 17,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  },
  {
    description: 'СУПЕР',
    email: '[e-mail]',
    firstName: 'Aline',
    id: 18,
    lastName: 'Basdasd',
    rate: 5,
    status: 0
  }
]

[Павел Диденко]

Роман, Артем Лукьянов, да, действительно. Подумал, почему тогда у автора работает без импорта, а без импорта как раз res.data. А в импорте res.body))

[Артем Лукьянов]

Роман, да, спасибо