javascript - 使用 Vue JS (Rapidapi) 不会出现数据 API
问题描述
我正在学习如何在 VueJS 中使用 API。我在Rapidapi上获取了开源 API 数据。
我通过输入链接尝试使用 Postman https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01
,并得到了响应。
但是在VueJS中尝试时,数据没有出现。我的循环中是否有任何遗漏?
这是我的代码的托管代码框:https ://codesandbox.io/s/nice-rain-45j6y
<template>
<div v-for="post in posts" :key="post.id">
{{ post.country }}
{{ post.confirmed }}
</div>
</template>
<script>
export default {
data() {
return {}
},
computed: {
posts() {
return this.$store.state.posts
}
},
mounted() {
this.$store.dispatch("loadPosts");
}
};
</script>
import axios from 'axios'
const options = {
method: 'GET',
url: 'https://covid-19-data.p.rapidapi.com/country',
params: {name: 'italy'},
headers: {
'x-rapidapi-key': '1031599022msh37c84da8c4e9b0ap1047d6jsn4d6475b64dc7',
'x-rapidapi-host': 'covid-19-data.p.rapidapi.com'
}
};
const covid = {
state: () => ({
posts: []
}),
mutations:{
setPosts(state, components){
state.posts = posts
}
},
actions: {
loadPosts({ commit }) {
axios.request(options)
.then(response => {
commit('setPosts', response.data)
console.log(response.data)
})
.catch(function (error) {
console.error(error);
});
}
},
}
export default covid;
我得到的回应console.log(response.data)
如下
解决方案
看来您需要 API 密钥才能使用它。代码 401 表示未经授权,可能是因为您没有使用密钥。您可以获取您的 API 密钥并将其添加到查询参数中。您可以在此处阅读文档:
https://docs.rapidapi.com/docs/keys
https://example.p.rapidapi.com/?rapidapi-key=***************************
在你的情况下应该是这样的:
https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01&rapidapi-key=API_KEY_HERE
编辑如果你想在组件中使用状态,你需要导入它们。
import { mapState } from 'vuex';
export default{
computed: { ...mapState(['posts']) }
}
您可以对操作执行相同的操作。 http://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components
推荐阅读
- javascript - 给对象上课
- vector - 向量维度上的八度有问题
- javascript - javascript:输入字符串后获取数字
- google-ads-script - 报告查询无效:ACCOUNT_PERFORMANCE_REPORT
- reactjs - 我需要一个简单的“useEffect()”示例,在订阅时进行清理
- excel - 基于星期几的平均值
- javascript - 在javascript中从延时发出的键值对编译对象
- javascript - 如何在另一个域/站点下使用 Electron 在 localhost 上运行反应应用程序?
- javascript - 如何在p5js中用相同的预加载图像颜色填充文本颜色
- go - GORM 将查询文本转换为小写