Javascript Chrome扩展将变量从AJAX传递到数组[重复]

Question

我正在编写一个调用谷歌翻译 api 的 chrome 扩展程序。一旦我得到翻译的单词，我想将它添加到一个数组中，但我相信它是异步的，我不确定如何将它传递给数组，以便它在主线程上可用。

  var translatedWords = ["hola"];
  var text = "what";
  var key="******************";
  var source="en";
  var dest="es";


  $.ajax({
type: "GET",
url: "https://www.googleapis.com/language/translate/v2key="+key+"&source="+source+"&target="+dest+"&q="+text
}).done(function(response) {

//SET Translated word
var WordTranslated = response.data.translations[0].translatedText;

//populate into array
translatedWords.push(WordTranslated);

}).fail(function(response) {
console.log("FAILURE: " + JSON.stringify(response));
});


console.log("translatedWords " + JSON.stringify(translatedWords));

这个输出

translatedWords ["hola"] 

它现在应该在哪里

translatedWords ["hola","que"]

我怎样才能做到这一点？谢谢！

Answer 1

这不是 chrome 扩展的问题，这是 ajax 请求中的回调问题。当您调用 $.ajax 时，响应是异步的。这意味着它不会等待返回，直到它返回继续执行您的方法。所以你的操作顺序是：

1. 进行ajax调用
2. 运行 console.log 语句
3. Ajax 语句返回，运行成功

您需要将依赖于结果的逻辑放入实际的成功回调中，如下所示：

$.ajax({
    type: "GET",
    url: "https://www.googleapis.com/language/translate/v2key="+key+"&source="+source+"&target="+dest+"&q="+text
}).done(function(response) {
    //SET Translated word
    var WordTranslated = response.data.translations[0].translatedText;

    //populate into array
    translatedWords.push(WordTranslated);

    console.log("translatedWords " + JSON.stringify(translatedWords));

    //Any other logic here as well
}).fail(function(response) {
    console.log("FAILURE: " + JSON.stringify(response));
});