vue-axios使用记录

Posted NUTURE

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-axios使用记录相关的知识,希望对你有一定的参考价值。

问题

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

本文最新版本

以上是关于vue-axios使用记录的主要内容,如果未能解决你的问题,请参考以下文章

Vue-axios快速上手(转)

Vue-axios/resource

vue-axios整合使用 取消options请求

vue-axios

vue-axios

vue-axios