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;

现在，在响应 header 中，我有“x-expires-at”，我想在自动注销中使用它。因此，如果进行 api 调用，用户 token 就会重置。

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已经在整个项目的多个地方使用。

如何从一个 js 文件中的另一个类调用另一个 js 文件中的 onResponse 函数？ 我在这里正确使用回调吗？如果没有，在这种情况下如何正确使用回调？

Answer 1

Here I cannot use export { api, onResponse }; as api is already being used at multiple places in whole project.

您的项目的正确导入/导出语法是

// 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

Am I using callback correctly here?

不，一点也不。 onResponse 不应该是在 api.js 文件中声明的函数，也不应该从那里导出它 - 避免上述所有麻烦。

If not, how to use callback correctly in such scenario?

将回调作为使用它的函数的参数:

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'));
});