Question

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

我尝试了一堆不同的方法，包括使用get而不是fetch进行操作，但这也未定义。我做了一些研究，并了解了箭头功能，但是我没有使用箭头功能。

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

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

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

因此，我想要的是根据发送给PHP中的第三方API的get请求做出的集合，该API返回存储在我Vue组件中的路由/ api。现在，它只记录未定义的内容。

用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);

路线：路线:: get（'/ api'，'ApiController @ getTickets'，）;

Answer 1

fetch返回包含响应res的Promise。（这只是一个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

在第一个承诺中添加return语句

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

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

3 个答案: