Javascript 导出默认和导入

Question

I have the following code:

const API1 = new API({
   ...
})

const API2 = new API({
   ...
})

export default { API1, API2 }

I need to import like this:

import API1 from '/lib/api'

API1.get()...

But it doesn't work. I don't want to do this:

import blah from '/lib/api'
blah.API1.get()...

How can I solve this? Thanks.

Answer 1

If you need to export multiple items, and don't want to have to create two variables in the consuming module (one for the default import - the object, and another for the API1 property), your only other option is to change the default export to a named export, allowing you to import just one particular named property:

const API1 = new API({
   ...
})

const API2 = new API({
   ...
})

export { API1, API2 }

and

import { API1 } from '/lib/api'

API1.get()...

The export { syntax indicates that the export is named, rather than default, and the import { syntax indicates that you're importing a named import, rather than a default import.

(It looks a lot like destructuring, and it's a little bit similar, but it's not the same)

Answer 2

Since you're default exporting an object you need to access individual property to access there methods, Instead you can use named exports

// exporting values

export const API1 = new API({
   ...
})

export const API2 = new API({
   ...
})

---

// Importing values

import { API1 } from '/lib/api'

API1.get()...