代码之家 › 专栏 › 技术社区 › dapidmini

未捕获的承诺嵌套异步函数承诺错误处理

promise async-await ecmascript-6 asynchronous javascript

dapidmini · 技术社区 · 3 年前

我试图在我的项目中实现承诺和异步/等待。我需要使用fetch将一些数据发布到服务器,然后使用javascript执行其他过程。但我不知道应该如何处理嵌套异步/等待承诺的错误。

[编辑-添加了主要问题]

问题是出现了一个错误“Uncaught(in promise)stop!!”还有字符串“停下!!”不会被添加到div中

以下是我尝试过的:

function tunggu(waktu) {
    return new Promise((resolve) => {
    const action = setTimeout(() => {
      const str = `${waktu.toString()} milisecond has passed<br/>`;
      resolve(str);
    }, waktu);
  })
}

const div = document.querySelector('#asd');

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
    console.log(json);
    
    (async () => {
      div.innerHTML = 'start<br/>';
      const a = await tunggu(2000);
      div.innerHTML += a;
      throw('stop!!'); // it looks like this line is causing the error
      const b = await tunggu(3000);
      div.innerHTML += b;
    })();
  })
  .catch(error => {
    console.log('error occurred', error)
    div.innerHTML += error
  })

<div id="asd"></div>

这个(也在上) jsfiddle )只是我代码的一个简化版本,在我的项目中,fetch使用方法POST,而js进程实际上有更多的进程,所以我使用了 throw 因为错误可能发生在任何地方。

1 回复 | 直到 3 年前

Tomalak 3 年前

出现了一个错误“Uncaught(in promise)stop!!”还有字符串“停下!!”不会被添加到div中

通过在中引入独立的异步函数,您打破了承诺链 .then() 处理程序(抛出,但没有 .catch() 这最终会导致你看到的错误)。

相反,让整个 .然后() 处理程序异步:

function tunggu(waktu) {
  return new Promise((resolve) => {
    setTimeout((() => resolve(`${waktu.toString()} milisecond has passed`)), waktu);
  })
}

const div = document.querySelector('#asd');

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(async (json) => {
    console.log(json);
    
    div.innerHTML = 'start<br/>';
    const a = await tunggu(2000);
    div.innerHTML += a + '<br/>';
    throw('stop!!');
    const b = await tunggu(3000);
    div.innerHTML += b;
  })
  .catch(error => {
    console.log('error occurred', error)
    div.innerHTML += error
  })

<div id="asd"></div>

或者,从异步IILife中返回承诺,以保持承诺链完好无损:

function tunggu(waktu) {
  return new Promise((resolve) => {
    setTimeout((() => resolve(`${waktu.toString()} milisecond has passed`)), waktu);
  })
}

const div = document.querySelector('#asd');

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
    console.log(json);
    
    return (async () => {
      div.innerHTML = 'start<br/>';
      const a = await tunggu(2000);
      div.innerHTML += a + '<br/>'; 
      throw('stop!!');
      const b = await tunggu(3000);
      div.innerHTML += b;
    })();
  })
  .catch(error => {
    console.log('error occurred', error)
    div.innerHTML += error
  })

<div id=“asd”></部门>