Question

以下是该场景：有一个名为api.js的文件，它有方法api()来进行api调用。还有另一个名为AutoLogout的类，它具有显示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”，我想在autologout中使用它。因此，如果进行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已在整个项目的多个位置使用。

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

Answer 1

这里我不能使用fork，因为api已经在整个项目的多个地方使用。

项目的正确导入/导出语法为

multiprocessing

export { api, onResponse };

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

我在这里正确使用回调吗？

不，一点也不。 // index.js export { default as userService } from './userService'; export { default as api, onResponse } from './api';不应该是在api.js文件中声明的函数，也不应该从那里导出 - 免除了上述所有麻烦。

如果没有，如何在这种情况下正确使用回调？

使回调成为使用它的函数的参数：

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

然后在调用onResponse函数时，将您的回调作为参数传递：

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

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

  onResponse(response);

  …
}

javascript - 从另一个类调用导出的函数

1 个答案: