4 解决跨域问题，axios使用

###1.安装axios， main.js文件里全局引用

npm install axios  //安装
import axios from 'axios'   //main里面全局引用
Vue.prototype.$axios = axios   //挂载到vue实例上，vue里面可以直接使用this.$axios.get请求数据
Vue.prototype.API='/api' 
//声明HOST，后面会用到
编辑config文件夹下的index.js
proxyTable: {
      "/api": {
        target: "http://v.juhe.cn",
        changeOrigin: true,
        pathRewrite: {"^/api" : ""}
      }
    }
这里解决代理问题，把目标路径代理成/api

###2.使用axios

created() {
      let url=this.API+"/toutiao/index?key=5d246218ca30324b81a89697620d7704";
      console.log(url);
///api/toutiao/index?key=5d246218ca30324b81a89697620d7704
      this.axios.get(url)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }

###3.后面，把得到的数据，用起来即可 上面data预定义的一个空数组imgs axios的then里面，把get请求来的数据放到数据里面，并截取前几条

this.imgs=res.data.result.data.slice(0,4)
<mt-swipe :auto="4000">
    <mt-swipe-item v-for="(img,index) in imgs" :key="index">
        <img :src="img.thumbnail_pic_s">//把图片插入进轮播图
    </mt-swipe-item>
 </mt-swipe>

###4.axios简单的带参数的写法

created() {
      let url=this.HOST+"/toutiao/index";
      this.axios.get(url,{
        params: {
          type:"",
          key:"5d246218ca30324b81a89697620d7704"
        }
      })
        .then(res => {
          this.imgs=res.data.result.data.slice(0,4)
          //console.log(res)
        })
        .catch(err => {
          console.log(err);
        });
      }
简单起见，直接定义一个url带参数使用

在vuecli3脚手架环境里配置跨域，需要在根目录创建vue.config.js文件，具体配置如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://v.juhe.cn',
        ws: true,
        changeOrigin: true,
        pathRewrite:{
          "^/api":""
        }
      },
    }
  },
}

###axios创建实例的用法