Блог

Главная - Вопросы по программированию - JS async / await с выборкой не работает так, как PHP включает в себя файл JSON

JS async / await с выборкой не работает так, как PHP включает в себя файл JSON

#javascript #fetch-api

Вопрос:

Приведенный ниже код работает на PHP, но не на JS. Можете ли вы сказать мне, почему? Как я могу заставить работать чистую версию JS?

 async function cccrFlow() {
    response = await fetch('assets/club_mems.json');
    club_mems = [];
    club_mems = await response.json(); // DOESN"T WORK
}

function cccrFlow() {
    club_mems = <?php include('assets/club_mems.json');?>; //  WORKS PERFECTLY
}

club_mems.json

 [{"Name":"Ahmedistan, Jamshed","clubEXP":"2022-09-15"},{"Name":"Anaizi, Paul N","clubEXP":"2021-01-27"},{"Name":"Anderson, Simon","clubEXP":"2022-06-30"},{"Name":"Ashes, Bob P","clubEXP":"2022-04-21"}]

Комментарии:

1. Потому что PHP выполняет код синхронно и задолго до того, как какой-либо контент будет отправлен в браузер. В основном ваш второй пример JS видит только прямой вывод.

2. Итак, вы бы посоветовали придерживаться версии php, избегая версии async/await?

3. не могли бы вы предоставить нам журналы? браузер должен был сообщить что-то в консоли, если бы он обнаружил какие-либо ошибки

4. Откуда вы знаете, что версия JS не работает? Вы могли бы сделать console.log(response.status, club_mems); это для нас.

Ответ №1:

Когда вы используете fetch, вы должны убедиться, что любой загружаемый вами актив/ресурс — общедоступен. Короче говоря,

если вы используете этот URL-адрес в браузере http://yourserver.com/assets/club_mems.json и можете увидеть ответ в браузере, то ваш fetch/async/await будет работать (см. скриншот).

Если вы не хотите предоставлять свои данные в открытом доступе, вам придется включить файл JSON, используя один из методов загрузки модуля, т. е. import/require .

Редактировать

Для достижения этой цели: вам необходимо иметь какой-то загрузчик модулей в вашей среде разработки. Загрузчик модулей позаботится о том, чтобы после создания приложения для среды prod ваш код включал данные JSON без каких-либо проблем.

Существуют различные варианты: webpack, bundlr, посылка и т.д. Проверьте их официальные веб — сайты, чтобы узнать, как их настроить.

Как только вы это настроите, вы можете просто написать в своем коде:

 const jsonData = require("/path/to/club_mems.json");

or

import jsonData from "/path/to/club_mems.json"

доступ к файлу JSON

Комментарии:

1. Как включить файл JSON, используя один из методов загрузки модуля, т. е. импорт/запрос?

2. Я обновил свой ответ, см. раздел «Редактирование».

Ответ №2:

попробуйте это решение:

 function cccrFlow() {
    club_mems = fetch('assets/club_mems.json')
    .then(response => response.json())
    .then(data => {
        console.log(data)
        alert(data);
    })
}

Комментарии:

1. Я хотел использовать асинхронность и ожидание с выборкой.

2. Я думаю, что эта ссылка полезна для вас dmitripavlutin.com/javascript-fetch-async-await

Метки: ,