VUE调用API教程,解决VUE跨域问题。
VUE调用API方法1、使用VUE-CLI脚手架做项目的情况下。//VUE-CLI做项目太方便了。2、安装axios.npm i axios3、在main.js文件引入axios原型链import axios from 'axios'Vue.prototype.$axios = axios4、在config文件夹中的index.js文件中有的 proxtable{}proxyTable: {'/b
·
VUE调用API方法
1、使用VUE-CLI脚手架做项目的情况下。//VUE-CLI做项目太方便了。
2、安装axios.
npm i axios
3、在main.js文件引入axios原型链
import axios from 'axios'
Vue.prototype.$axios = axios
4、在config文件夹中的index.js文件中有的 proxtable{}
proxyTable: {
'/book': { //聚合平台有很多免费的API,大家可以参考使用
target: 'http://apis.juhe.cn/goodbook/catalog', //接口地址
changeOrigin: true,
pathRewrite: {
'^/book': '' //将以上的接口地址转义为 /book , 然后在需要调用接口的地方使用。
}
},
}
5、在页面中调用
data(){
return{
book:[] //创建一个数组来接收API的内容
}
},
created() { //在生命周期函数中调用
this.$axios
.get('/book?key=你的KEY&dtype=json') //接口一般是get或post,主要看文档。
.then(res=>{
this.book = res.data.result; //把数据给book数组
console.log(res) //打印数据
})
},
6、大功告成,很多人在终端运行的时候测试页面,然后会出现404或者跨域问题出现。最最最最重要就是重新运行就解决了这些问题。 npn run dev, 重新跑起来。
更多推荐
已为社区贡献3条内容
所有评论(0)