Problem: Implement the singleton design pattern with async calls in the class. I can't get the values when i import the module into a second file.
Case: Eventually i want to implement this logic for a bearer token update when it expires. I have multiple functions that relies on the token. So when i get a 403 i will update the token and all the other function have acces to this updated token as well.
Script 1:
//File1.js
import axios from "axios";
async function getJson(n) {
const req = await axios.get(
`https://jsonplaceholder.typicode.com/todos/${n}`
);
return req.data.title;
}
class Todo {
constructor() {
if (Todo.instance == null) {
this.title;
Todo.instance = this;
}
return Todo.instance;
}
async init() {
this.title = await getJson(1);
}
async updateTodo(n) {
this.title = await getJson(n);
}
getTodo() {
return this.title;
}
}
const todo = await new Todo().init();
export default todo;
Script 2:
const todo = await import('./File1.js');
console.log(todo); //[Module: null prototype] { default: [AsyncFunction (anonymous)] }
todo.updateTodo(3) //TypeError: todo.updateTodo is not a function
Script 2.1:
import todo from './File1.js';
await todo.init();
console.log(todo.getTodo())
await todo.updateTodo(2)
console.log(todo.getTodo())
Dynamic imports are different from regular imports. When you do:
import module from "./module.js";
module will be equal to the default export, something like:
// module.js
export default function module() {
// do something
}
In dynamic imports (import()), however, you have to manually access the default export:
const importModule = await import("./module.js");
const module = importModule.default;
module(); // default export module
So in your code you would be doing:
todo.default.updateTodo(3);