为什么从 Vue 发送的 Laravel API 请求被取消答案

【问题标题】：Why Laravel API request sent from Vue gets canceled为什么从 Vue 发送的 Laravel API 请求被取消
【发布时间】：2021-01-17 13:20:41
【问题描述】：

我正在尝试使用 Axios 将 formData 从 Vue 发送到 Laravel Homestead 上的 Laravel (v6) API，其中包含一些数据和一个用于读取和验证后端数据的 Excel 文件。如果工作表包含的记录超过 800 条，例如一切正常的文件，但是当我将其增加到 850 或 1000 条时，请求被取消，我不知道为什么。

请求成功

已取消的请求

如您所见，它没有像成功请求那样到达实际请求，它只是在开始时被取消。

但奇怪的是数据已经被验证并插入到数据库中，但是响应被转换为取消，并且实际的成功响应没有从 API 返回

此错误与服务器配置有关还是需要代码修复？

Vue 代码

submitImportedUsers(){
  let formData = this.gatherFormData();
  this.importUsers(formData);
},
gatherFormData() {
  //create formData to send normal dta with files
  let formdata = new FormData();
  formdata.append("users", this.form.usersFile);
  formdata.append("images", this.form.imagesFile);
  const json = JSON.stringify({
    unique_fields: this.form.uniqueFields,
    update_duplicates: this.form.duplicateUsers,
    entity_id: this.entityId,
    user_id: this.userId,
  });
  formdata.append("data", json);
  return formdata;

Laravel

$usersImportService->moveFile($request->file('users'));

public function moveFile($file) {
    if(is_null($this->folderName) || !isset($this->folderName)){
        $this->generateUuid();
    }
    $ext = $this->getRequestFileExt($file);
    $usersFileName = $this->folderName.'.'.$ext;
    $this->fileName = $usersFileName;
    $path = storage_path().'/uploads';
    \File::isDirectory($path) or \File::makeDirectory($path, 0777, true, true);
    move_uploaded_file($file->getRealPath(), $this->storePath.$usersFileName);
}

然后开始使用 Laravel Excel 读取它并将数据插入到数据库中

【问题讨论】：

标签： laravel vue.js file-upload axios homestead

【解决方案1】：

我发现前端开发人员在 axios 实例中所做的问题可能会帮助任何面临此问题的人

axiosInstance.defaults.timeout = 10000;

它可以是任何用于设置 axios 超时的东西，这里设置为 10 秒，请求需要更多时间，因此将其设置为更高的值可以解决问题

【讨论】：