时间戳

首页 > 解决方案 > 来自文档的简单 Vue Axios 示例，但使用组件

javascript - 来自文档的简单 Vue Axios 示例，但使用组件

问题描述

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

我有一个 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）

希望这是有道理的！

提前致谢

标签： javascriptvue.js

解决方案

您需要更改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()
}

推荐阅读