javascript - 在异步方法中循环遍历对象

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

你甚至应该在你的 map 函数中包含一个异步标签:

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 });
                ...
}