vue-axios使用记录

最新推荐文章于 2024-08-21 09:15:23 发布

原创最新推荐文章于 2024-08-21 09:15:23 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ajax

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一位新手开发者在使用Axios获取API数据并传递给Vue组件时遇到的问题及解决方法。主要讲解了如何正确处理异步请求，确保数据成功返回后再调用父组件的方法。

问题

本人在Ajax方面纯小白，所以在使用axios时犯了个很简单的错误

我想通过API返回数据后接着执行父组件的一个函数

一开始的代码

<script>
import axios from 'axios'

  export default {
    data() {
      return {
        list: '',
        length: '',
      };
    },
    methods: {
        getList(){
            axios
                .get('api_url')
                .then(response => (
                    this.list = response.data['list'],
                    this.length = response.data['length'],
                    )
                )
            
            this.$emit('next_fuc', this.list, this.length),
        },
    }
  };
</script>

结果就是明明接收到了数据，传给next_fuc函数的值却是空值

解决

这是因为Ajax是异步操作，还没有等返回数据就已经执行了this.$emit('next_fuc', this.list, this.length)

把需要等待数据返回的操作放在.then里就可以解决

<script>
import axios from 'axios'

  export default {
    data() {
      return {
        list: '',
        length: '',
      };
    },
    methods: {
        getList(){
            axios
                .get('api_url')
                .then(response => (
                    this.list = response.data['list'],
                    this.length = response.data['length'],

                    this.$emit('next_fuc', this.list, this。length),
                    )
                )  
        },
    }
  };
</script>