Vue中使用axios发送ajax请求

工具

在Vue中发送Ajax有很多工具可以实现，例如：

• 浏览器自带的fetch函数
• vue-resource第三方模块
• axios(vue推荐使用的模块)

Axios简介

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

特点

可以实现跨平台的数据请求，在浏览器中可以发送XHR（ XMLHttpRequests）请求，在node服务器上可以发送http请求，并且可以自动转换 JSON 数据等

安装axios

npm install axios --save

cdn

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

更多axios介绍内容可参考axios官方文档

axios使用说明

axios的使用

在Home.vue中请求ajax

1、在Home.vue的script标签下引入axios

import axios from 'axios'

2、在mounted计算属性中调用getHomeInfo函数，使得页面挂载后发送请求

mounted () {
    this.getHomeInfo()
  }

3、methods中写入具体方法

methods: {
    getHomeInfo () {
    //
      axios.get('/static/jin/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },

本地模拟数据放在static目录下，因为只有static中的目录可以被外部访问到。

别问为什么

然后成功获取到数据：

所以这样就ok了？

---

no no no！！！

---

4、使用proxy代理

目前我们是本地模拟的接口地址，而代码上线的话是不能这样写的

用‘/api’代替target里面的地址，后面组件中我们调用接口时直接用api代替

在config中的index.js中有个proxyTable的配置项

proxyTable: {
      '/api': {               //当我们请求api时
        //将请求依然转发到当前服务器的8080端口
        target: 'http://localhost:8080',   
        pathRewrite: {        //替换路径
          '^/api': '/static/jin'
        }
      }

当发送ajax请求时

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },

vue的脚手架工具会自动将api替换成’/static/jin’
从而实现了我们的需求：请求的是api而vue会为我们做一个开发环境的转发

这个功能是webpack-dev-server这个工具提供的

注意：当改动配置时需要重启服务

以api形式成功获取：