使用Ajax

Question

我正在尝试使用ajax构建数组。数组“ test”的结构很好，但是数组“ translations”的结构不好（请检查我的控制台输出）

Chrome控制台：

边缘控制台：

Firefox控制台：

那么我应该在代码中进行哪些更改以使数组“翻译”结构与数组“测试”结构相同

这是我的功能：

function translateAllCaptions(dropdownId) {
var selectedLanguageValue = getDropDownSelectedLanguageValue(dropdownId);
var selectedLanguage = "";
var translations = [];
translations.push(["Caption", "Translation"]);


// Get translation language
selectedLanguageValue ? selectedLanguage = getLanguage(selectedLanguageValue) : console.log("Language dropdown error");

// Translate all captions
// Get all captions
var captions = getAllCaptions();

captions.forEach(caption => {
    $.ajax({
        url: "https://www.googleapis.com/language/translate/v2",
        dataType: "jsonp",
        data: {
            key: "xxxxxxxxxxxxx",
            source: 'en',
            target: selectedLanguage,
            q: caption
        },
        success: function (result) {
            translations.push([caption, result.data.translations[0].translatedText]);
        }
    }); 
});
var test = [
    ['Caption', 'Translation'],
    ['Software', 'Logiciel'],
    ['Network', 'Réseau'],
    ['Hardware', 'Matériel']
]
// Create and download
console.log(test);
console.log(translations);
exportToCsv("Translations.csv", translations);  
}

Answer 1

您的ajax请求是异步启动的。这意味着forEach会在请求完成之前完成。但是，当您在开发人员控制台中扩展结果时，它们就完成了，您会看到结果。这确实是误导。解决方法是在处理结果之前等待它们。语法很尴尬，但应该可以使用：

var requests = captions.map(caption => {
    $.ajax({
        url: "https://www.googleapis.com/language/translate/v2",
        dataType: "jsonp",
        data: {
            key: "xxxxxxxxxxxxx",
            source: 'en',
            target: selectedLanguage,
            q: caption
        },
        success: function (result) {
            translations.push([caption, result.data.translations[0].translatedText]);
        }
    }); 
});

$.when.apply($, requests).then(function(deferreds) {
    exportToCsv("Translations.csv", translations);  
})

如果您需要从此函数返回translations数组，那么您将需要更深入地参与Promise和async-await，但这足以使导出工作。

[更新]

您在评论中写道，它不起作用。然后您在做其他错误的事情。由于我没有其余的代码和API密钥，因此我在下面准备了一个简单的演示。它使用的是简单地回显请求的API。但是，正如您将看到的那样，只有在所有三个请求完成时，它才会写入控制台，并且数组中将包含三个元素。

let sources = ['blue','red','green'];
let results = [];

let requests = sources.map(color => $.getJSON(`http://mockbin.org/request?color=${color}`).then(r => results.push(r.queryString)));

$.when.apply($, requests).then(() => console.log(results));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>