在Vue中获取api后控制台日志未定义

Question

从 API 获取时（第 3 方，我在 Laravel 控制器中进行身份验证并获取数据）我在控制台中得到“未定义”。我想将数据存储在 Vue 组件中。

我尝试了很多不同的方法，包括 get 而不是 fetch，但这也记录了 undefined。我做了一些研究并阅读了箭头函数，但我没有使用箭头函数。

data() {
    return {
        tickets: [],
    };
},

created() {
    this.fetchTickets();
},

methods: {
    fetchTickets() {
        fetch('/api')
        .then(res => {
            this.tickets = res.json;
        })
        .then(res => {
            console.log(res.json);
        }) 
    }
}

所以，我想要的是由我发送到 PHP 中的第 3 方 API 的 get 请求组成的集合，该集合返回到路径 /api，存储在我的 Vue 组件中。现在它只是记录未定义。

在 PHP 中编辑后端请求

 $response = $client->get('v1/tickets/search.json', [
        'query' => ['statuses[]' => 'active', 'assignedTo[]' => 314955, 
        'sortDir' => 'desc', 'sortBy' => 'updatedAt']
    ]);

    $json = (string)$response->getBody()->getContents();
    $decoded = json_decode($json, true);
    return collect($decoded);

路线： Route::get('/api', 'ApiController@getTickets',);

Answer 1

fetch 返回一个包含响应 res 的承诺。 （这只是一个 HTTP 响应，而不是实际的 JSON。）

要从响应中提取 JSON 正文内容，我们使用 json() 方法

你可以阅读更多关于using fetch的信息。

fetchTickets() {
    fetch('/api')
    .then(res => res.json()) //returning a promise To extract the JSON body content from the response
    .then(resJson => {
        this.tickets = resJson
        console.log(resJson);
    }) 
}

Answer 2

在进行第二次承诺之前返回您的数据。

fetchTickets() {
    fetch('/api')
    .then(res => {
        this.tickets = res.json;
        return res;
    })
    .then(res => {
        console.log(res.json);
    }); 

Answer 3

在第一个promise中添加return语句

fetch('/api')
  .then(res => {
      return res.json();
   })
   .then(tickets => {
     // tickets is a local variable scoped only here
     console.log(tickets);
   })