javascript - вызвать экспортированную функцию из другого класса

Question

Вот сценарий: существует файл с именем api.js, в котором есть метод api() для выполнения вызовов API.Есть еще один класс, называемый AutoLogout, который имеет функцию для показа модолога автоматического выхода и выхода пользователя из системы через определенное время в случае отсутствия активности.Это прекрасно работает.

index.js в ../services

export { default as api } from './api';
// export { api, onResponse } from './api'; tried this as well
export { default as userService } from './userService';

api.js

import userService from './userService';

export function onResponse(response) {
    // returns response to calling function
    return response;
}

async function api(options) {
  const settings = Object.assign(
    {
      headers: {
        'content-type': 'application/json',
        'x-correlation-id': Math.random()
          .toString(36)
          .substr(2),
      },
      mode: 'cors',
      credentials: 'include',
      body: options.json != null ? JSON.stringify(options.json) : undefined,
    },
    options,
  );

  const response = await window.fetch(`/api/v0${options.endpoint}`, settings);
  // calling onResponse() to send the response
  onResponse(response);

  if (response.status === 403) return userService.logout();
  if (response.status > 299) throw new Error();
  if (response.status === 204) return true;
  return response.json ? response.json() : false;
}

export default api;

Теперь, в заголовке ответа я "x-expires-at "и я хочу использовать его в аутологе.Таким образом, при вызове API пользовательский токен сбрасывается.

auto-lougout.js

import { userService, api } from '../services';
// import { userService, api, onResponse } from '../services'; tried this as well
export default class AutoLogout {

  constructor() {
    super();
    if (!userService.getUser()) userService.logout();
    // here I am not able to call onResponse() from api.js
    // getting response received from onResponse()
    api.onResponse((resp) => { console.log(resp.headers.get('x-expires-at'))});
  }
}

Попытка реализовать в качестве примера, приведенного в этой статье:

https://zpao.com/posts/calling-an-array-of-functions-in-javascript/

Здесь я не могу использовать export { api, onResponse };, поскольку api уже используется в нескольких местах во всем проекте.

Как мне позвонить onResponse функция в одном файле js из другого класса в другом файле js? Правильно ли я здесь использую функцию обратного вызова?Если нет, то как правильно использовать обратный вызов в таком сценарии?

Answer 1

Здесь я не могу использовать export { api, onResponse };, поскольку API уже используется в нескольких местах во всем проекте.

Правильный синтаксис импорта / экспорта для вашего проекта будет

// api.js
export function onResponse() { … }
export default function api() { … }

// index.js
export { default as userService } from './userService';
export { default as api, onResponse } from './api';

// elsewhere
import { userService, api, onResponse } from '../services';
// use these three

Правильно ли я использую обратный вызов здесь?

Нет, совсем нет.onResponse не должно быть функцией, объявленной в вашем файле api.js, и ее не следует экспортировать оттуда - избавляя вас от всех вышеперечисленных хлопот.

Если нет, то как правильно использовать обратный вызов втакой сценарий?

Сделать обратный вызов параметром функции, которая его использует:

export default async function api(options, onResponse) {
//                                         ^^^^^^^^^^
  const settings = Object.assign(…);

  const response = await window.fetch(`/api/v0${options.endpoint}`, settings);

  onResponse(response);

  …
}

Затем при вызове функции api,передать ваш обратный вызов в качестве аргумента:

api(options, resp => {
  console.log(resp.headers.get('x-expires-at'));
});