vue中Axios请求豆瓣API数据并展示到Swipe中

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方法如下

```javascript

// 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中做如下代码：

.mint-swipe{
width: 100%;
height: 200px;
}

##注意如下几点：
#####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);

});