Проход по объекту в асинхронном методе

Question

У меня есть объект, который выглядит следующим образом и хранит некоторые атрибуты:

По сути, мне нужно перебрать этот объект и получитьfile атрибут каждого ключа, который я позже использовал бы в своем коде для генерации нескольких Video-React компонентов. Я пытался использовать функцию map(), но сайт зависал с ошибкой:

Parsing error: Can not use keyword 'await' outside an async function.

Даже если пример кода, с которым я работаю, находится внутри функции async.

Вот мой код:

            const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
            const file = response.data;
            file.map( source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].file);
                formBody.set('user_id', "1234");
                formBody.set('format', "json");
                formBody.set('ip', "");
                formBody.set('tts', "0");
                formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

                var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
                var data = sign_fields.join(':');
                var signature = hmacsha256(data, sigkey);

                formBody.set('sig', signature);

                var formBodyStringified = new URLSearchParams(formBody).toString();

                const resJson = await fetch(Config.api.livebox, {
                    method: 'POST',
                    body: formBodyStringified,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => res.json());
                const finalJsonUrl = 'https:' + resJson.hls;
                this.setState({ videoSource: finalJsonUrl });
                videoPosition++;
            });

Любые предложения, как я могу пройти через объект?

Заранее спасибо.

Answer 1

Вы должны включить асинхронный тег даже в функцию карты:

file.map(async source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].file);
                formBody.set('user_id', "1234");
                formBody.set('format', "json");
                formBody.set('ip', "");
                formBody.set('tts', "0");
                formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

                var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
                var data = sign_fields.join(':');
                var signature = hmacsha256(data, sigkey);

                formBody.set('sig', signature);

                var formBodyStringified = new URLSearchParams(formBody).toString();

                const resJson = await fetch(Config.api.livebox, {
                    method: 'POST',
                    body: formBodyStringified,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => res.json());

Или вы можете использовать Promise.all :

const fetchList = file.map(source => {
                var videoPosition = 0;
                var sigkey = "sigkey";
                var formBody = new FormData();
                formBody.set('ver', "1.2");
                formBody.set('key', "key");
                formBody.set('video_id', file[videoPosition].file);
                formBody.set('user_id', "1234");
                formBody.set('format', "json");
                formBody.set('ip', "");
                formBody.set('tts', "0");
                formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

                var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
                var data = sign_fields.join(':');
                var signature = hmacsha256(data, sigkey);

                formBody.set('sig', signature);

                var formBodyStringified = new URLSearchParams(formBody).toString();

                const request = fetch(Config.api.livebox, {
                    method: 'POST',
                    body: formBodyStringified,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => res.json());
return request;
 });

const resJsons = Promise.all(fetchList);
resJsons.forEach(resJson => {
                const finalJsonUrl = 'https:' + resJson.hls;
                this.setState({ videoSource: finalJsonUrl });
                ...
}

Answer 2

В этой строке вы используете await:

const resJson = await fetch(Config.api.livebox) 

, но это неверное использование. потому что родительская функция является map функцией обратного вызова, а не асинхронной!.