奇怪的 Unhandled promise rejection

Question

如下代码，一直输出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楼的了

Answer 1

当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);
})

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

Answer 2

是不是这个意思

    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
    }

Answer 3

最后改成这样了，不用 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()

Answer 4

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