Как я могу импортировать функции из другого файла javascript?
Я новичок в JS, и у меня проблемы с импортом.
Я делаю приложение со списком планет Star Wars, где я хотел бы импортировать функции из другого файла JS, например:
--- dataManager.js ---
export function getAllPlanetDataFromAPI() {
let allPlanetsInfo = new XMLHttpRequest();
allPlanetsInfo.open('GET', 'https://swapi.co/api/planets');
allPlanetsInfo.onload = function () {
console.info(allPlanetsInfo.responseText)
};
allPlanetsInfo.send();
}
--- main.js ---
import { getAllPlanetDataFromAPI } from './dataManager';
getAllPlanetDataFromAPI();
Я получаю сообщение об ошибке: «Uncaught SyntaxError: Unexpected token {»
Похоже, что синтаксис неверен, но я уже проверил все статьи об импорте в Интернете и не смог найти, что я делаю неправильно.
Используете ли вы html-файл для загрузки этих скриптов или какой-либо фреймворка, такого как реакция?
Вы пробовали убрать фигурные скобки { при импорте?
Я не использовал веб-пакет или накопитель. @yaswanth Я загружаю эти файлы в свой index.html, например: <script src = "../static/js/main.js" defer></script> <script src = "../static/js /dataManager.js" type = "module"></script>
@niccord Я тоже пробовал, тогда ошибка: «Uncaught SyntaxError: Неожиданный идентификатор». Я также пытался импортировать все из файла с «*», тогда ошибка была: «Uncaught SyntaxError: Unexpected token *»
для файла main.js также можно указать type = "module". Но здесь вы столкнетесь с проблемой CORS. Вы можете серверировать эти файлы, используя любой сервер, чтобы решить проблему CORS.
@yaswanth Кроме того, я использую Flask для запуска своего приложения. Я не знаю, имеет ли это какое-то отношение к моей проблеме, кстати
Попробуйте этот export const getAllPlanetDataFromAPI = () => {
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
в es6 вы можете использовать import {getAllPlanetDataFromAPI} из './dataManager', иначе вы должны импортировать ./dataManage
Первая версия в вопросе, что не работает. Второй выдает ошибку: "Uncaught SyntaxError: Unexpected string" :(
Хорошо, так я понял это!
Основная проблема заключалась в том, что я не добавил атрибут «type = «module»» в свой файл main.js в своем HTML. После этого я получил другую ошибку: «404- Not Found», и я мог исправить ее, добавив «.js» после моего импорта. Итак, идеально работающий код:
--- index.html ---
<script src = "../static/js/main.js" type = "module"></script>
<script src = "../static/js/dataManager.js" type = "module"></script>
--- dataManager.js ---
export function getAllPlanetDataFromAPI() {
let allPlanetsInfo = new XMLHttpRequest();
allPlanetsInfo.open('GET', 'https://swapi.co/api/planets');
allPlanetsInfo.onload = function () {
console.info(allPlanetsInfo.responseText);
};
allPlanetsInfo.send();
}
--- main.js ---
import { getAllPlanetDataFromAPI } from './dataManager.js';
getAllPlanetDataFromAPI();
Спасибо за все ответы и комментарии, особенно @yaswanth, который подтолкнул меня к решению!
Кроме того, мне даже не нужна эта строка в моем html: <script src = "../static/js/dataManager.js" type = "module"></script>
Вы должны изменить расширения файлов на .mjs
затем запустите свой код с помощью этой команды:
узел --experimental-modules main.mjs
пожалуйста, не стесняйтесь спрашивать меня в комментариях.
не имеет никакого отношения к nodejs вообще.
Использовали ли вы, например, веб-пакет или накопительный пакет для преобразования кода ES в стандарты Javascript?