axios的使用

1.安装

cnpm install axios --save

2.将本地模拟数据放到static文件夹下，因为只有static文件夹中的内容可以被外部访问。
最终创建的文件路径为：static/msg/index.json

3.配置config文件夹下的index.js文件

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // webpack-dev-sever提供
      // 请求线上的api端口时，请它转发到本服务器的8080端口上
      '/api': {
        target:'http://localhost:8080',
        // 替换：一旦请求的地址是api开头的，就替换到本地的static的msg文件夹下
        pathRewrite: {
          '^/api': '/static/msg'
        }
      }
    },

4.使用：一般在父组件中发起ajax请求，这样页面中的数据请求一次就行了。

// 父组件

<template>
    <div>
        <city-header></city-header>
        <city-search></city-search>
        <city-list :cities="cities" :hot="hotCities"></city-list>
        <city-alphabet :cities="cities"></city-alphabet>
    </div>
</template>

<script>

// 引入axios

import axios from 'axios';

// 引入子组件

import CityHeader from './components/Header.vue';
import CitySearch from './components/Search.vue';
import CityList from './components/List.vue';
import CityAlphabet from './components/Alphabet.vue';

export default {
    name: 'City',
    components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data () {
        return {
        	// 声明数据
            cities: {},
            hotCities: []
        }
    },
    methods: {
        getCityInfo () {
        	// 获取json数据，成功后执行函数
            axios.get('/api/city.json').then(this.handleGetCityInfoSucc);
        },
        handleGetCityInfoSucc (res) {
        	// res为获取的结果
            res = res.data;
            // 如果数据成功的返回了，并且有data项
            if(res.ret && res.data) {
                const data = res.data;
                this.cities = data.cities;
                this.hotCities = data.hotCities;
            }
        }
    },
    // 挂载完成后执行获取数据的函数
    mounted () {
        this.getCityInfo();
    }
}
</script>

<style lang="scss" scoped>
</style>