标签：axios 记录 list next length vue data response

问题

本人在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>

本文最新版本

标签：axios,记录,list,next,length,vue,data,response
来源： https://www.cnblogs.com/zouxlin3/p/14930613.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。