使用 API 不起作用，我在这里做错了啥？

Posted 2023-04-12

【中文标题】使用 API 不起作用，我在这里做错了啥？

【英文标题】：Consuming API not working, what am I doing wrong here?使用 API 不起作用，我在这里做错了什么？

【发布时间】：2021-11-06 11:22:26

【问题描述】：

不确定这里是不是改东西的地方，但是因为你们的cmets，我改了一些东西，我仍然看不到图片，但这里是代码的更新：

JS 应用：

    import axios from 'axios';
export default 
    name: 'home',
    components: 
        ImageCard
    ,
    data() 
        return 
            images: []
        
    ,
    methods: 
        fetchImages = () => 
            axios
                .get("https://foodish-api.herokuapp.com/api/images/pizza")
                .then(res => 
                    console.log(res);
                    this.setState( images: res.data.message );
                )
                .catch(err => console.log(err));
            this.images = fetchImages()
            );
        

Index.cshtml 代码在这里：

<div id="app">
<div class="home">
    <li v-for="image in images" :key="image.id">
        <img :src="image.url" : />
    </li>
    
</div>

这里显然有问题，但由于看不到图片，我似乎无法正确处理，这里还有什么问题？另外，当你提到我应该做不同的事情时，请指出我正确的代码方向：D

【问题讨论】：

你的 fetchImages() 返回一个 Promise 你需要使用 then 和 this.images.push(WHAT_YOU_SHOULD_ADD) 类似：axios.get('http://webcode.me').then(resp => console.log(resp.data); );

图片也是一个对象，不应该是 image.WHAT_EVER_PROPERTY ？

你的布局中是否也添加了 vue 脚本

是的，我已经添加了 Vue，尝试了一些模拟数据只是为了看看它是否有效！不过谢谢！现在我正在尝试另一件事，但我仍然做错了什么，我可以在 cmets 中发布代码吗？一直在尝试，但它只会以纯文本发送：//

【参考方案1】：

你做错了：

创建一个方法 fetchImages 并且永远不要调用它。 this.setState 这个未定义的函数。 this.images = fetchImages() 会导致你进入无限循环，因为这是一个递归函数 在您的html 中使用:src="image.url" 显示图像，但您将数据作为字符串而不是对象获取，您必须使用:src="image"

你可以在这个codeandbox项目中查看解决方案

https://codesandbox.io/s/busy-ellis-rcifm?file=/src/App.vue

<template>
  <div id="app">
    <li v-for="image in images" :key="image.id">
      <img :src="image" : />
    </li>
  </div>
</template>

<script>
import axios from "axios";

export default 
  name: "App",
  data() 
    return 
      images: [],
    ;
  ,
  mounted() 
    axios
      .get("https://foodish-api.herokuapp.com/api/images/pizza")
      .then((res) => 
        this.images = res.data;
      )
      .catch((err) => console.log(err));
  ,
;
</script>

【讨论】：

谢谢兄弟！很棒的技巧，至少我认为我在 c# 中很不错，但我在 Js 和 axios 以及什么 knox 上很烂，我在看解决方案，我不知道我是智障还是什么，但我无法让它工作......天哪我什至这样做.. 这家伙有一个 Vue.app，我应该把那个代码放到我的 app.js 中吗？

codeandbox项目出了点问题，没有保存我的修改，我重写了代码放在答案里，请检查一下

【参考方案2】：

首先，当你调用fetchImages()时，你需要设置this.images=fetchImages()，这样images的数据就会被设置。如果你想显示图片，你可以这样做：

<li v-for="image in images" :key="image.id">
     <img :src="image.url" :/>
</li>