陷入异步：Promise <rejected>: SyntaxError: [duplicate]

Posted 2023-02-27

【中文标题】陷入异步：Promise <rejected>: SyntaxError: [duplicate]

【英文标题】：Stuck with asynchrony: Promise <rejected>: SyntaxError: [duplicate]

【发布时间】：2019-06-18 18:33:12

【问题描述】：

您能帮我处理异步请求吗？我的任务是组织一个函数来通过 IP 获取城市名称并返回它。但我坚持这种异步。

我的代码：

async function get_city()
    // Get city name by IP. 

    const http = new XMLHttpRequest();
    const url='https://api.sypexgeo.net/json/';
    http.open("GET", url);
    http.send();

    var response_json = await JSON.parse(http.responseText);
        return response_json["city"]["name_ru"];    

我收到此错误：

Promise <rejected>: SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at get_city (http://vi…
?utm_replace=ViarVizualizatorArhiva_TR:645 
?utm_replace=ViarVizualizatorArhiva_TR:591 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at get_city (?utm_replace=ViarVizualizatorArhiva_TR:591)
    at replacer (?utm_replace=ViarVizualizatorArhiva_TR:639)
    at ?utm_replace=ViarVizualizatorArhiva_TR:649

如何处理这个错误？

【问题讨论】：

不要使用var，改成const/let。为什么你使用 JSON.parse 的 await？你的 http.responseText 里面有什么？你的应用中有 try/catch 块吗？

await 毫无意义。目前您在响应到达之前调用JSON.parse，而responseText 仍然是一个空字符串。你需要先正确地promisify XHR，这样你就可以等待它了。

【参考方案1】：

您需要在请求中监听load 事件。

http.addEventListener("load", function () 
  console.log(JSON.parse(http.responseText));
);

要从中构建一个Promise，您可以在load 事件中使用resolve。

function get_city() 
  return new Promise(function(resolve) 
    const http = new XMLHttpRequest();
    http.addEventListener("load", function () 
      resolve(JSON.parse(http.responseText));
    );
    http.open("GET", 'https://api.sypexgeo.net/json/');
    http.send();
  );

要使用这个函数，你可以用await调用它。

async function()  await get_city(); 

【讨论】：

我猜你必须将该事件包装到 try/catch 块中，并以 await 作为该方法的前缀。