vue项目笔记（14）-axios实现数据（模拟数据）请求

axios实现数据（模拟数据）请求

1、在终端运行以下命令，安装axios

npm install axios --save

2、进行需求分析，在本例中首页Home组件中有Header、Swiper、Icons、Recommend、Weekend等5个子组件需要进行数据绑定。换言之，我们需要发起5次ajax请求，但是频繁发起ajax请求，网站的性能必定是很低的。所以，我们需要尽量减少网络请求的次数，我们可以通过父组件Home发起数据请求，然后把数据传给子组件就可以了。

3、利用axios发起网络请求的步骤

（1）首先，在父组件Home中引入，在mounted钩子中发起请求

import axios from "axios"

import axios from "axios"
  import HomeHeader from "./components/Header";
  import HomeSwiper from "./components/Swiper"
  import HomeIcons from "./components/Icons"
  import HomeRecommend from "./components/Recommend"
  import HomeWeekend from "./components/Weekend"
  export default {
    name: "Home",
    data() {
      return {
        city: '',
        iconList:[],
        recommendList:[],
        swiperList:[],
        weekendList:[]
      };
    },
    components: {
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeRecommend,
      HomeWeekend
    },
    mounted(){
      this.getHomeInfo();
    },
    methods: {
      getHomeInfo(){
        // axios返回的结果是一个promise对象
        axios.get('/api/index.json').then(
          // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
          this.getHomeInfoSucc
        )
      },
      getHomeInfoSucc(res){
        console.log(res);
        res = res.data;
        if (res.ret && res.data) {
          this.city = res.data.city;
          this.swiperList = res.data.swiperList;
          this.iconList = res.data.iconList;
          this.recommendList = res.data.recommendList;
          this.weekendList = res.data.weekendList;
        }
      }
    }
  };

（2）在没有后端支持的时候，我们可以通过json文件进行数据模拟。但是，对应的json文件应该放在什么位置呢？在vue项目目录中，static文件夹是存放的静态文件，只有该文件夹下的文件可以被外界访问到（验证方法：地址栏输入对应static文件夹下面json文件的正确路径如：http://localhost:8080/static/mock/index.json）。发现，对应的模拟数据index.json文件的内容，可以看到，如下：

（3）此外，对于模拟数据，我们不希望把它们上传至线上，应该怎么处理呢？其实，很简单，我们只要忽略上传它们即可。具体做法是：打开.gitignore文件，在忽略的文件中，我们添加上模拟数据所在的文件路径（static、mock）即可。如图：

（4）网络请求的地址应该怎么写呢？上线之前修改代码是很忌讳的。我们设想一下，如果可以实现转发，那就再好不过了。在开发环境中，把api下面json文件的请求转化到本地的文件夹下。很幸运，vue中webpack-dev-server提供了代理功能，具体做法如下：打开config-index.js文件，做以下修改。需要注意的是：在修改了配置文件之后，我们需要重启项目npm run dev。

proxyTable: {
      '/api': {
        target: 'http://localhost:8080', //设置转化的域
        pathRewrite:{
          '^/api': '/static/mock' // 路径替换
        }
      }