【发布时间】：2020-12-21 18:51:18
【问题描述】：
[我已经稍微修改了这个问题以考虑另一种方法。如果这个问题看起来过长，我也很抱歉。我想我有点啰嗦，但我真的只是想表达清楚。]
我对 Laravel、Vue 和 Vuetify 还很陌生，但是经过一番努力，我已经让我的 CRUD 应用程序与 MySQL 一起工作，至少只要我传递了我的 Controller 良好数据。但现在我正在努力寻找正确的错误处理方式。
我使用 Vuetify 进行前端错误检查，它似乎工作得很好。我已经能够为我能想到的每个条件编写验证，并在最适合显示它的地方显示一条有意义的错误消息。我知道我需要在我的 Laravel 控制器后端进行相同的验证，并且在那里编写好的验证似乎也很简单。但是，我无法弄清楚如何将后端验证错误传达给我的 Vue 组件。
我的 CRUD 应用正在执行经典的待办事项列表。我的输入表单上用于添加新任务的字段之一是新任务的截止日期，而前端和后端都应进行的编辑之一是不能指定截止日期在过去。我“不小心”省略了对前端的检查，但已将其包含在后端，以确保当我选择过去的日期作为到期日时后端会检测到它。我的 Laravel 控制器按预期检测到，我的浏览器控制台显示：
显然，控制器中的验证正在运行，并且它们已正确检测到到期日期的问题。现在，我的问题是如何将相关信息获取到我的 Vue 组件，以及在相关时（如本例所示），如何将其显示给我的用户？
我能找到的所有使用 Vue 组件的 Laravel 应用程序示例都使用 then 和 catch 块来处理 Axios 响应和错误信息。我想到的另一个选择是访问 Laravel 控制器生成的错误包，但我找不到任何关于如何在 Vue 组件中完成的信息，所以看起来我必须采用 Axios 方法...... .
我无法弄清楚如何在 catch 块中的 Vue 组件中显示来自响应负载的相关信息。在我发现的每个示例中，响应返回到 then 块，错误返回到 catch 块但是当出现错误时，then 块永远不会被执行以支持 @987654329 @ 堵塞。但是当catch 块执行时，它无法看到响应，因此它无法从响应中向我显示任何内容，例如验证消息。我为答案所做的所有搜索都让我感到困惑而不是开明，因为许多答案都假设验证错误会回到 Laravel 刀片，而其他答案则是针对更旧版本的 Laravel。 （我正在运行 Laravel 8.x。）
我知道并非所有错误都是用户错误。例如，数据库可能已关闭，从而无法对数据库进行所有访问。我还需要注意这些情况。需要告诉用户一些事情——可能是“数据库已关闭。请稍后再试。” - 并且需要告知管理员数据库已关闭。我仍在尝试找出最好的方法，但我倾向于将 ErrorBoundary 作为解决方案。
目前，如果有人能解释在出现用户可修复的错误时如何从响应负载中获取我想要的信息，我会很高兴。关于如何处理错误不是用户可修复的情况的一些建议会更好。
这是我在 Vue 组件中插入逻辑的相关位：
/* We are creating a new item so determine the id for the new item. It should be
one greater than the highest id currently in the array. Every id of an existing
task should always be at least 1. */
console.log(this.name + ".save() - saving a new item");
var highestTaskID = 0; //must be one less than the lowest possible id value
for (let todo of this.todos) {
if (todo.id > highestTaskID) highestTaskID = todo.id;
}
var newTaskID = highestTaskID + 1; /* Calculate the ID of the new task. */
this.editedItem.id = newTaskID;
this.form.id = this.editedItem.id;
this.form.description = this.editedItem.description;
this.form.status = this.editedItem.status;
this.form.priority = this.editedItem.priority;
this.form.due = this.editedItem.due;
let data = new FormData();
data.append('id', this.form.id);
data.append('description', this.form.description);
data.append('status', this.form.status);
data.append('priority', this.form.priority);
data.append('due', this.form.due);
axios.post('/task', data)
.then((res) => {
console.log(this.name + ".save() - response from insert (then): " + res);
this.snackbarMessage = "Created new task";
this.showMessageSnackbar = true;
this.showTable = true; //start showing ToDo table again
this.form.reset();
this.getTasks();
})
.catch((error) => {
console.log(this.name + ".save() - response from insert (catch): " + res);
console.log(this.name + ".save() - error: " + error);
this.snackbarMessage = "Failed to create new task";
this.showMessageSnackbar = true;
this.showTable = true; //start showing ToDo table again
})
这是我的 TaskController 中的 store() 方法：
public function store(Request $request)
{
app('debugbar')->info('TaskController.store() started');
$today = date('Y-m-d');
$this->validate($request, [
'description' => ['required', 'min:5', 'max:191'],
'status' => ['required'],
'priority' => ['required'],
'due' => ['required', 'after-or-equal:' . Date('Y-m-d')]
],
[
'description.required' => 'You must provide a non-blank task description',
'description.min' => 'The task description must contain at least 5 characters',
'description.max' => 'The task description must not exceed 191 characters',
'status.required' => 'You must provide a task status',
'status.in' => 'You must choose a task status from: Pending or Completed',
'priority.required' => 'You must provide a task priority',
'priority.in' => 'You must choose a task priority from: Low, Medium or High',
'due' => 'You must provide a task due date',
'due.after_or_equal' => 'You must provide a due date greater than or equal to today'
]
);
app('debugbar')->info('TaskController.store() validations completed');
Task::create($request->all());
}
我应该在控制器本身而不是在 Vue 组件中记录我检测到的所有错误吗？在某些方面这可能会容易得多，尽管我仍然必须能够检测哪些错误可以传回给用户以供他们处理，并且当我只需要告诉他们稍后再试因为应用程序不工作时完全没有。
【问题讨论】：