Question

我有以下代码：

fooService.update(this.bar).then( this.$emit('updated', this.updatedBar),).catch(err => {...

如果遇到错误，则不会捕获该错误。如果我将代码更改为：

fooService.update(this.bar).then(x => {this.$emit('updated', this.updatedBar);}).catch(err => {...

然后将捕获错误并按预期显示。谁能给我解释发生了什么，为什么会这样呢？

修改

基本服务代码：

function updateBar(bar) {
  return $http.put(`/api/bar/${bar.Id}`, bar);
}

Answer 1

所以我仍然认为this.$emit中发生错误的原因是

fooService.update(this.bar).then( this.$emit('updated', this.updatedBar),).catch(err => {

当您从该函数将{strong>响应设置为this.$emit而不是呼叫本身时，它必须首先评估.then。

这样做的证明

function emit(){
  console.log('emit')
}

var promise = new Promise(function(resolve,reject){
setTimeout(() => {
  console.log('promise is done')
  reject();
}, 1000)
})

promise.then(emit()).catch( function() {console.log('carry on');})

注意它如何首先记录“发射”

现在，如果出现该错误，您将发现它没有成功

function emit(){
  console.log('emit')
  throw new Error("bad")
}

var promise = new Promise(function(resolve,reject){
setTimeout(() => {
  console.log('promise is done')
  reject();
}, 1000)
})

promise.then(emit()).catch( function() {console.log('carry on');})

内幕就是这样做的（我能想到的最简单的方法）

emit()

try{
    getService()
} catch{
    ...
}

如果您实际上传递了.then一个函数，它将改变事物的顺序

function emit(){
  console.log('emit')
  throw new Error("bad")
}

var promise = new Promise(function(resolve,reject){
setTimeout(() => {
  console.log('promise is done')
  reject();
}, 1000)
})

promise.then(() => {emit()}).catch( function() {console.log('carry on');})

再在后台看起来像这样

try{
    getService()
    emit()
} catch{
    ...
}

Vue JS中的错误处理-未捕获错误

1 个答案: