Question

我有一个要使用的字符串数组。但是，当我使用forEach函数时，它将运行0次。另外，当我打印数组的大小时，JS表示它为空。但是，当我在控制台中打印数组时，我可以看到其中包含字符串。可能是什么原因造成的？

import {drawKanji} from "../KanjiDrawing/kanji-painter-original";

require('../../css/kanji.css');

window.onload = addAllKanji;

var allSVGElements = [];

async function addAllKanji(){
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    await fileNames.forEach(function (fileName) {
       fetchKanji(fileName);
    });
    addKanjiToHTML();
    drawKanji();
}

function fetchKanji(name){
    fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`,{
        method: "GET",
    }).then(response => drawSVG(response))
        .catch(error => {
            throw error;
        });
}

async function drawSVG(svg) {
    let svgRawText = await svg.text();
    svgRawText = svgRawText.replace(/[\s\S]*(?=<svg)/,"");
    allSVGElements.push(svgRawText);
}

async function addKanjiToHTML() {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(function (ele) {
       console.log(ele);
       console.log("running forEach")
    });
}

Answer 1

您使用的异步/等待方式不正确-请参见下面的代码中的注释

var allSVGElements = [];

async function addAllKanji(){
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    // change to Promise.all
    return await Promise.all(fileNames.map(function (fileName) {
        // return something
        return fetchKanji(fileName);
    }));
}

function fetchKanji(name){
    // return the promise
    return fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`,{
        method: "GET",
    }).then(response => drawSVG(response))
        .catch(error => {
            throw error;
        });
}

async function drawSVG(svg) {
    let svgRawText = await svg.text();
    svgRawText = svgRawText.replace(/[\s\S]*(?=<svg)/,"");
    allSVGElements.push(svgRawText);
}

//doesn't need to be async
function addKanjiToHTML() {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(function (ele) {
       console.log(ele);
       console.log("running forEach")
    });
}

尽管您的代码会更简洁，写得更好

function addAllKanji() {
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    return Promise.all(fileNames.map(fetchKanji));
}

function fetchKanji(name){
    // return the promise
    return fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"}).then(drawSVG)
}

async function drawSVG(svg) {
    let svgRawText = await svg.text();
    return svgRawText.replace(/[\s\S]*(?=<svg)/,"");
}

addAllKanji().then(allSVGElements => {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(function (ele) {
       console.log(ele);
       console.log("running forEach")
    });
});

这甚至还包括addKanjiToHTML的功能

说实话，我认为这是async / await无法给您带来任何好处的情况

我会像上面那样写上面的代码

let fetchKanji = name => fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"})
    .then(response => response.text())
    .then(svgRawText => svgRawText.replace(/[\s\S]*(?=<svg)/,""));

function addAllKanji() {
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    return Promise.all(fileNames.map(fetchKanji));
}


addAllKanji().then(allSVGElements => {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(ele => {
       console.log(ele);
       console.log("running forEach")
    });
});

不是可见的异步/等待状态：p

虽然有人发现

let fetchKanji = async (name) => {
    const response = await fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"});
    const svgRawText = await response.text();
    return svgRawText.replace(/[\s\S]*(?=<svg)/,"");
};

阅读方便

Answer 2

这是我的主意。

let和await仅在async function内部有效。它不适用于全局函数，这意味着它们无法访问诸如“ fetchKanji（name）”之类的全局函数。解决此问题并尝试。

Answer 3

如果您运行以下运行正常的代码。

let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    await fileNames.forEach(function (fileName) {
       console.log(fileName);
    });

JavaScript说，即使其中包含字符串，数组也为空

3 个答案: