js异步/等待不工作

Question

我试图围绕异步/等待以及如何使用它们。我正在按照我在信中看到的一些例子（我认为），但等待实际上并没有等待ajax响应。这是代码：

async function doAjaxGet(ajaxurl) {
    const result = await $.ajax({
        url: ajaxurl,
        type: 'GET',
        datatype: "text",      
    });
    return result;
}

$(document).ready(function () {
    let json = doAjaxGet( "/static/imeiXref.json");
    console.log('json: ', json);
    processJSONData( json );
});


function processJSONData(data) {
    console.log('Data: ', data);
    Data = JSON.parse( data);

但是await关键字实际上并没有等待返回结果。在控制台日志中，我得到以下内容：

json:  Promise {<pending>}
Data:  Promise {<pending>}                                  controller.js:98 
jQuery.Deferred exception: Unexpected token o in JSON at position 1 SyntaxError: Unexpected token o in JSON at position 1             jquery.min.js:2 
    at JSON.parse (<anonymous>)
    at processJSONData (http://localhost:3000/js/controller.js:99:25)
    at HTMLDocument.<anonymous> (http://localhost:3000/js/controller.js:80:5)
    at l (http://localhost:3000/js/jquery.min.js:2:29375)
    at c (http://localhost:3000/js/jquery.min.js:2:29677) undefined
jquery.min.js:2 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at processJSONData (controller.js:99)
    at HTMLDocument.<anonymous> (controller.js:80)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

但是，如果我实际查看控制台中返回的结果，那么数据实际上就在那里。所以似乎await函数不是'等待'，并且我的代码在ajax调用之后继续执行，并且它正在尝试解析尚未返回的JSON数据。我如何等待等待？

谢谢.....

Answer 1

async函数返回承诺。即使从异步函数返回某些内容，它也只是promise所解析的值。

你需要做这样的事情才能使用这个承诺：

$(document).ready(function () {
    doAjaxGet( "/static/imeiXref.json")
    .then(json => {
       console.log('json: ', json);
       processJSONData( json );
    })
});

编辑。这是一个工作片段。但请注意，这是下载json而不是字符串，因此无需解析它。这与异步问题实际上是一个不同的问题，似乎工作正常。

async function doAjaxGet(ajaxurl) {
  const result = await $.ajax({
    url: ajaxurl,
    type: 'GET',
  });
  return result;
}

$(document).ready(function() {
  doAjaxGet("https://jsonplaceholder.typicode.com/posts/1")
    .then(json => {
      console.log('json: ', json);
      processJSONData(json);

    })
});


function processJSONData(data) {
  // NOTE: data is already parsed
  console.log('Data: ', data);
  console.log("id: ", data.userId)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

所以在这里：

$(document).ready(function () {
    let json = doAjaxGet( "/static/imeiXref.json");
    console.log('json: ', json);
    processJSONData( json );
});

你不是在告诉let json等待doAjaxGet的回应。它在doAjaxGet函数内部等待，但其他一切都在顺序执行而无需等待。

你想做的就是这个（我想）：

$(document).ready(async function () {
    let json = await doAjaxGet( "/static/imeiXref.json");
    console.log('json: ', json);
    processJSONData( json );
});

Async / await基本上是承诺的语法糖。 await等待承诺解决，所以你必须在使用promise链的每个级别做异步/等待，或者你可以使用标准的promise.then()样式编码。