无法在 Laravel 5.5 中使用 axios 获取记录

Posted 2023-02-23

【中文标题】无法在 Laravel 5.5 中使用 axios 获取记录

【英文标题】：Unable to fetch records using axios in Laravel 5.5

【发布时间】：2018-07-19 11:53:17

【问题描述】：

我正在尝试使用 axios 获取记录。 但问题是我在控制台中收到错误，如下所示： GET http://127.0.0.1:8000/getData500（内部服务器错误）

这是我试图获取数据的组件

<template lang="html">
  <div class="getData">
    <h1 class="text-center text-muted">Recently Added Chemicals</h1>
    <div class="table-responsive">
      <table class="table table-striped">
        <tr>
          <th>Chemical Name</th>
          <th>Status</th>
          <th>Stock</th>
        </tr>
        <tr v-for="list in lists">
          <td>list.chem_name</td>
          <td>
            <p v-if="lists.is_active = 1" style="color: green;">Active</p>
            <p v-else style="color: red;">Not Active</p>
          </td>
          <td>
            <p v-if="lists.is_stocked = 1" style="color: green;">In Stock</p>
            <p v-else style="color: red;">Out Of Stock</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default 
  data () 
    return 
      lists: ,
      errors: 
    
  ,
  mounted()
    axios.get('getData').then((response) => this.lists = response.data).catch((error) => console.log(this.error));
  

</script>

然后是我在资源控制器中的getData函数

public function getData()
      $id = Auth::user()->id;
      $data = chemType::where('user_id', $id)->orderBy('id', 'DESC')->get();
      return response()->json(200, $data);
    

请帮忙！！！

【问题讨论】：

请在网络选项卡中查看您的开发人员工具，您应该会看到获取请求旁边有状态 500 错误。如果可能，单击它，然后单击“响应”以获取完整的错误消息。

“响应”选项卡显示“已成功添加”。我正在尝试添加一个文本字段，并且在同一个组件上我还添加了另一个子组件以显示最新记录而无需重新加载页面。

如果你只是 return $data 会发生什么，因为 Laravel 会自动返回一个 json 响应。

如果我只是 return $data app.js:50923 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at app.js:50923 at

好的，所以没有 500 错误？否则，如果有错误，它将被捕获。您确定您的查询实际上正在返回某些内容吗？

【参考方案1】：

500 错误表示后端出错，查看 chrome dev tools network 查看抛出的异常。

我认为错误在 response()->json() 中。第一个参数应该是$data

【讨论】：

是的，我也这样做了。我首先添加了 $data 参数，但是当我添加新记录时，它不会自动添加新创建的行。为此，我仍然需要刷新页面。现在该怎么办？

我做了 console.log(response.data) 并且工作正常。它给出了记录，但是当我尝试添加新记录时，它再次调用错误并且没有在 console.log(response.data) 中添加新创建的行。但是，当我刷新页面时，它会被添加，而且我不想要那个！我想在按下创建而不重新加载页面时自动将数据添加到表中。

这次的错误是这样的。 app.js:50923 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at app.js:50923 at

添加新记录？那么你需要另一种 Vue 方法。你只是在mounted() 中获取你的数据库记录，而不是像我看到的那样添加。

那么，现在该怎么办？我在 addNewChemicalName.vue 中使用 save 方法，然后使用另一个组件 getChemicalData.vue 在其中我使用 mount 方法来获取记录。在第一个组件中，我正在导入第二个组件，我试图在不刷新的情况下显示数据。但仍然卡在那里

【参考方案2】：

确认您的 bootstrap.js 文件中有以下行

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

还要检查您的 html 页面的标题中是否包含以下内容。

<meta name="csrf-token" content=" csrf_token() ">

【参考方案3】：

我通过在资源控制器中进行更改来做到这一点。控制器的问题在于，我在创建新记录后没有发送 json 响应。所以我做的一件事发送了 json 响应。 在 vue 部分，我使用了从父组件到子组件的 $emit 函数，在子组件中，我使用该 $emit 函数刷新了记录，是的，我现在正在获取新创建的记录，而无需重新加载任何页面。

【参考方案4】：

请检查您的 URL 是否有效。表示它是否在 Controller 中获取数据。它给出了一些回应或不回应。我遇到了同样的问题，但我的 URL 没有获取任何数据，因为我的模型不包括在内。所以在包含模型之后，我的问题就解决了。