奇怪的 Unhandled promise rejection

brook
  • 3.1k

如下代码,一直输出Unhandled promise rejection (rejection id: 1): error1,怎么避免?

主要功能为 getVal 第一次调用预加载,第二次调用时没返回就等,返回了就直接取值

const rejects = [0,1]
let i = 0
function getSummary( id) {
  return new Promise((resolve, reject) => {
    console.log('rr', id, i)
    if(rejects.includes(i)) {
      setTimeout(() => reject('error1'), 200)
    } else if(id === 1) {
      setTimeout(() => resolve(id), 200)
    } else {
      setTimeout(() => resolve(id), 500)
    }
    i++
  })
}

class Test {
  test() {
    this.getVal()

    setTimeout(async () => {
      try {
      const val = await this.getVal()
      console.log('get1', val)
      }catch (ex) {
        console.log('error')
      }
      console.log('get2', await this.getVal())
    }, 1000)
  }
  async getVal() {
    try {
      if (!this.summary) {
        this.summary = getSummary(1).catch(() => getSummary(2)).then((data) => {
          this.summary = data
          return data
        })
      } else if(this.summary.then) {
        return await this.summary
      }
    } catch (ex) {
      this.summary = null
    }
    return this.summary
  }
}
new Test().test()

已解决见3楼
如1楼所说,第一个 getVal 异常被上抛了,直接 try catch 也不行,只能 Await 才行。
只好去看 await 改成3楼的了

回复
阅读 28.3k
4 个回答
Allan91
  • 2.2k
✓ 已被采纳

Promise 的状态变为rejection 时没有正确处理,让其一直冒泡(propagation),直至被进程捕获。这个 Promise 就被称为 unhandled promise rejection

// 方式一 .then(undefined, () => {})
new Promise((resolve, reject) => {
  // ...
  reject('timeout');
}).then(undefined, (error) => {
  console.error(error);
});

// 方式二 .catch(() => {})
new Promise((resolve, reject) => {
  // ...
  reject('timeout')
}).catch((error) => {
  console.error(error);
})

关键点就是不要让异常上抛。

是不是这个意思

    async getVal() {
        try {
            if (!this.summary) {
                //  加上await
                this.summary = await getSummary(1).catch (()=>getSummary(2))
                //后面的不要了
                // .then((data)=>{
                //     this.summary=data; 
                //     return data;
                // })
            } else if (this.summary.then) {
                return await this.summary
            }
        } catch (ex) {
            this.summary = null
        }
        return this.summary
    }

最后改成这样了,不用 async 了

const rejects = [0,1]
let i = 0
function getSummary( id) {
  return new Promise((resolve, reject) => {
    console.log('rr', id, i)
    if(rejects.includes(i)) {
      setTimeout(() => reject('error1'), 200)
    } else if(id === 1) {
      setTimeout(() => resolve(id), 200)
    } else {
      setTimeout(() => resolve(id), 500)
    }
    i++
  })
}

class Test {
  test() {
    this.getVal()

    setTimeout(async () => {
      try {
      const val = await this.getVal()
      console.log('get1', val)
      }catch (ex) {
        console.log('error')
      }
      this.summary = null
      console.log('get2', await this.getVal())
    }, 100)
  }
  getVal() {
    if (!this.summary) {
      this.summary = getSummary(1).catch(() => getSummary(2)).then((data) => {
        this.summary = data
        return data
      }).catch((ex) => {
        this.summary = null
        return null
      })
    }
    return this.summary
  }
}
new Test().test()

IE9、IE10中就报错Unhandled promise rejection SyntaxError: 语法错误,该怎么解决呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏