vue中Axios请求豆瓣API数据并展示到Swipe中
- 1.首先是安装Axios;
安装方法cnpm install axios --save
等待npm安装完毕; 2.在main.js中引入axios引入方法;
import Axios from 'axios'
Vue.prototype.$axios = Axios
必须要这样引入才能使用全部的main.js方法如下
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import Axios from 'axios' import './lib/css/mui.min.css' import './lib/css/icons-extra.css' import 'mint-ui/lib/style.css' import { Header } from 'mint-ui' import { Swipe, SwipeItem } from 'mint-ui'; Vue.component(Swipe.name, Swipe); Vue.component(SwipeItem.name, SwipeItem); import router from './router' import App from './App' Vue.prototype.$axios = Axios Vue.prototype.HOST = "/api" Vue.config.productionTip = false Vue.component(Header.name, Header) /* eslint-disable no-new */ new Vue({ render: h => h(App), router }).$mount('#app');
3.引入以后要做post请求数据封装处理;
- 4.封装处理post请求后,要做跨域问题处理;
找到config目录下的index.js文件,然后找到proxyTable,进行修改,修改内容如下:
proxyTable: {
'/api': {
target: 'https://api.douban.com',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替
},
changeOrigin:true
}
},
- 5.做完第4步后需要修改main.js;在main.js中增加一行代码;
Vue.prototype.HOST = "/api"
- 6.然后在其他模块中就可以直接调用了
如:获取电影Top250 第一页 2条数据:
豆瓣API:https://api.douban.com/v2/movie/top250?start=0&count=2
然后可以在HomeContainer.vue中做如下代码:
<template>
<div>
<mt-swipe :auto="4000">
<mt-swipe-item v-for="item in listarr" :key="item.alt">
<img :src="item.images.large" alt=""/>
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
export default {
data(){
return {
listarr:[],
}
},
created(){
this.getLunbotu();
},
methods:{
getLunbotu(){
var url = this.HOST + "/v2/movie/in_theaters?city=广州&start=0&count=3"
this.$axios.get(url)
.then(response => {
console.log(response.data.subjects);
this.listarr = response.data.subjects
console.log(this.listarr);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
<style scoped>
.mint-swipe{
width: 100%;
height: 200px;
}
</style>
注意如下几点:
main.js中文件的Axios的配置信息
import Axios from 'axios'
Vue.prototype.$axios = Axios
Vue.prototype.HOST = "/api"
vue中使用跨域url请求则请求地址可以如下写法var url = this.HOST + "/v2/movie/in_theaters?city=广州&start=0&count=3"
注意使用axios中的写法
一、不要使用下面这种方法【这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of undefined 】
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
二、使用这种方法
this.$axios.get(url)
.then(response => {
console.log(response.data.subjects);
this.listarr = response.data.subjects
console.log(this.listarr);
})
.catch(error => {
console.log(error);
});