vue作用域,无法取到methods方法中return的值

157 阅读1分钟

最初代码如下:

<template>
    <div></div>
</template>

<script>
  import {download} from '@/tmApi/proposer.js'
  export default {
    name: 'test',
    methods: {
      getData(urlName) {
        download({'name':urlName}).then(res=>{
          if(res.data.status===0){
            console.log(res.data.data.url)
            return res.data.data.url;
          }
        })
      },
    },
    mounted() {
      this.getData('/api/get')
      console.log(this.getData('/api/get'))    }
  }
</script>

发现 console.log(this.getData(‘/api/get’))得到的是undefined
由于get是异步执行的,所以你也无法获取到请求返回的内容,要用回调的形式来获取:

<script>
      import {download} from '@/tmApi/proposer.js'
      export default {
        name: 'test',
        methods: {
          getData(urlName,callback) {
            download({'name':urlName}).then(res=>{
              if(res.data.status===0){
                console.log(res.data.data.url)
                callback(res.data.data.url)
              }
            })
          },
        },
        mounted() {
         this.getData('/api/get',(data) {
            console.log(data)
          })
        }
      }
    </script>