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

╰半橙微兮° 2021-09-16 02:28 499阅读 0赞

# 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][http_localhost_8080_static_mock_index.json]）。发现，对应的模拟数据index.json文件的内容，可以看到，如下：

![70][]

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

![70 1][]

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

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

[http_localhost_8080_static_mock_index.json]: http://localhost:8080/static/mock/index.json
[70]: /images/20210802/d0916d198bfb497990f40adde605a617.png
[70 1]: /images/20210802/b0456c4a76234dc38c76f87cabaebdc6.png