CODEWITHSUNDEEP
javascriptecmascript-6
Valay
Valay

Reputation: 1999

javascript - call exported function from another class

Here's the scenario: There is a file called api.js which has method api() to make api calls. There is another class called AutoLogout which has functionality to show autologout modal and logging out user after certain time in case of no activity. These works fine.

index.js in ../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;

Now, in response header I've "x-expires-at" and I want to use it in autologout. So, that if api call is made the user token resets.

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

Trying to implement as an example given in this article:

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

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

How do I call onResponse function in one js file from another class in another js file ? Am I using callback correctly here ? If not, how to use callback correctly in such scenario ?

Upvotes: 0

Views: 1914

Answers (1)

Bergi
Bergi

Reputation: 664297

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

The correct import/export syntax for your project would be

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

No, not at all. onResponse should not be a function declared in your api.js file, and it should not be exported from there - sparing you all the above hassle.

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

Make the callback a parameter of the function that uses it:

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

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

  onResponse(response);

  …
}

Then at the call of the api function, pass your callback as an argument:

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

Upvotes: 2

Related Questions