Question

这可能是一个非常愚蠢的问题，但是相信我，我已经尽力了结，无济于事。

我有一个appService.js文件，在其中我像这样调用API：

import axios from 'axios'
axios.defaults.baseURL = 'https://www.alphavantage.co'

const appService = {
    getPosts() {
            axios.get(`/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=5min&apikey=xxx`)
            .then(response => this.info = response)
    }
}

export default appService

然后有一个Vue组件（Stocks.vue），我想在其中显示{{info}}，如下所示：

<template>
  <div>
    <h4>{{ info }}</h4>
  </div>
</template>

<script>
import appService from '../app.service.js'
export default {
  name: 'Stocks',
  props: {
    msg: String
  },
}
</script>

我实际上只是想将我从API中获得的所有内容转储到该标记中。稍后我会解决其余的问题。

我基本上是从Vue文档中做一个简单的Axios示例，但是使用了一个组件。（https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Base-Example）

希望如此！

预先感谢

Answer 1

您需要将appService函数更改为返回由axios.get创建的承诺。您也不能在函数中为this赋值，但是可以在组件中赋值。

export default {
  getPosts () {
    return axios.get('/query', {
      params: { // dealing with a params object is easier IMO
        function: 'TIME_SERIES_INTRADAY',
        symbol: 'MSFT',
        interval: '5min',
        apikey: 'xxx'
      }
    })
  }
}

然后在您的组件中，也许在created钩子中

data () {
  return {
    info: {} // or some other appropriate default value
  }
},
async created () {
  this.info = await appService.getPosts()
}

来自文档的简单Vue Axios示例，但使用了一个组件

1 个答案: