vue小项目总结与笔记【六】——使用axios发送ajax请求

 

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：

npm install axios --save

 

引入：

import axios from 'axios'

 

使用：

在methods里定义获取方法和成功后执行方法，在mounted生命周期钩子里执行获取方法

methods: {
        // 获取方法
        getHomeInfo () {
            axios.get('/api/index.json?city=' + this.city)
                .then(this.getHomeInfoSucc)
        },
        // 成功后执行的方法
        getHomeInfoSucc (res) {
            res = res.data
            if (res.ret && res.data) {
                const data = res.data
                this.swiperList = data.swiperList
                this.iconList = data.iconList
                this.recommendList = data.recommendList
                this.weekendList = data.weekendList
            }
        }
    },
    // 一个生命周期钩子 HTMl挂载到页面完成后执行  一般用于ajax请求
    mounted () {
        this.lastCity = this.city
        this.getHomeInfo()
    }  

 

前期自己模拟后端数据的时候（数据放在static/mock），需要修改一些参数：

在config/index.js里找到dev里的proxyTable，作如下修改：

 proxyTable: {
      '/api': {
        // 请求api目录的时候，转发到'http://localhost:8080
        target: 'http://localhost:8080',
        // 路径替换  api => /static/mock/
        pathRewrite: {
          '^/api': '/static/mock/'
        }
      }
    }  

         //请求地址以api开头，就请求到本地的mock目录

 

改动配置项后，需要重启服务器！