Vue.js - 从返回未定义的随机 API 获取 JSON 数据答案

【问题标题】：Vue.js - Fetch JSON data from random API returning undefinedVue.js - 从返回未定义的随机 API 获取 JSON 数据
【发布时间】：2021-09-19 02:21:37
【问题描述】：

刚开始使用 Vue.js 进行开发，所以请放轻松！

我正在尝试使用一些随机 api 来开发一个简单的应用程序示例来获取数据。我能够从 randomuser.me/api 检索 json 数据，但是当我尝试从 random-data-api.com 获取数据时，我在控制台中收到一条未定义的消息。为什么它返回一个未定义而不是另一个？

const app = Vue.createApp({
    
    data() {
        return {
            cafeName: 'Magnolia Bakery',
            firstName: 'John',
            lastName: 'Doe',
            email: 'John@gmail.com',
            gender: 'male',
            picture:'https://randomuser.me/api/portraits/men/11.jpg',
            
        }
    },
    methods: {
        async getUser() {
  
            const coffeeRes = await fetch('https://random-data-api.com/api/dessert/random_dessert')
            const { coffeeResults } = await coffeeRes.json()

            const res = await fetch('https://randomuser.me/api')
            const { results } = await res.json()

            //console.log(results)
            console.log(coffeeResults)

            this.firstName =  results[0].name.first
            this.lastName = results[0].name.last
            this.email = results[0].email
            this.gender = results[0].gender
            this.picture = results[0].picture.large
            
        },
    },
})

app.mount('#app')

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body{
    font-family: Arial, Helvetica, sans-serif;
}

#app{
    width: 400px;
    height: 100vh;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
img{
    border-radius: 50%;
    border: 5px #333 solid;
}
.male{
    border-color:steelblue;
    background-color: steelblue;
    
}

.female{
    border-color: pink;
    background-color: pink;
    
}

button{
    cursor: pointer;
    display: inline-block;
    background: #333;
    color: white;
    font-size: 18px;
    border: 0;
    padding: 1rem 1.5rem;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random User Generator</title>
</head>
<body>
    <div id="app">
        <h1>{{cafeName}}</h1>
        <img :class="gender" :src="picture" :alt="`${firstName} ${lastName}`">
       <h1> {{firstName}} {{lastName}}</h1>
       <h3>Email: {{email}}</h3>
       <button v-on:click="getUser()" :class="gender">Get Random User</button>
    </div>
    <script src="https://unpkg.com/vue@3.0.5"></script>
    <script src="app.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript json vue.js

【解决方案1】：

API 不会通过属性coffeeResults 返回任何数据。所以你不能使用以下方法来解构数据：

const { coffeeResults } = await coffeeRes.json()

API(/api/dessert/random_dessert) 正在返回以下 JSON：

{
  "id": 861,
  "uid": "6ce2bf5b-26bc-443e-b3fd-7b889df08f75",
  "variety": "Cookie",
  "topping": "Marshmallows",
  "flavor": "Chocolate"
}

因此，无需解构，只需将数据存储在变量中：

async function fetchData() {
  try {
    const coffeeRes = await fetch('https://random-data-api.com/api/dessert/random_dessert')
    // ===> Change is here:
    const data = await coffeeRes.json()
    console.log(data)
  } catch(e) {
    console.error(e)
  }   
}

fetchData()

还要始终将包含await 的代码放在try..catch 中，以便您可以从异步调用中捕获错误。在这种情况下，来自 API 的错误响应。

【讨论】：