Vue 2.0 之后官方推荐使用 来完成前端的网络请求，不再推荐使用 vue-resource 了。下面我们安装使用 axios，来完成的常见的 get ，post 请求。并解决常见的跨域问题。 而axios的强大包括以下几点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
若有不当之处，请阁下大胆斧正，小弟我大恩不言谢。
安装
npm install --save axios vue-axios复制代码
安装完成后，在你项目的 main.js 手动 import 进来并且使用。
import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axiosInstance)复制代码
总结，Vue 需要用到什么插件，都要经过先安装，再手动导入，然后 调用Vue.use方法。BTW， axios 会自动将请求数据转换成 Json 格式，如果我们传给后台是表单格式就要设置一下 Content-Type 。
import Qs from 'qs'var axiosInstance = axios.create({ baseURL: location.protocol + '//127.0.0.1:8081/', transformRequest: function (data) { return Qs.stringify(data) }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})Vue.use(VueAxios, axiosInstance)复制代码 这里主要用到 qs 这个插件,将数据转换成 x-www-form-urlencoded 格式就是key=value&key=value 这样子，baseURL 可以帮助你设置主 URL，方便统一管理。
POST
this.axios.post('admin/login', { 'user_name': 'admin', 'user_pwd': 'admin' }).then(res => { //res.data do something right }).catch(res => { //do something wrong })复制代码 这里只要传入url ，params ，这里的user_name就是服务器的 key 了。然后用 then 来获取成功的回调，处理 res.data 这个是后台返回的结果，用 catch 来接受失败的回调。
GET
this.axios.get('/admin') .then(res => { console.log(res.data) }) .catch(res => { console.log(res.data) })复制代码 Get 的时候就省略了 params 这个参数了，直接在 then 接受回调。
跨域
当前端直接访问其他地址时，就会出现 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the request rsource.这个错误。
这时候需要后台跨域，比如 java 后台跨域创建 CrossFiledConfig 类完成跨域。
@Configurationclass CrossFiledConfig:WebMvcConfigurerAdapter() { override fun addCorsMappings(registry: CorsRegistry) { super.addCorsMappings(registry) registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET","POST","DELETE","PUT") .maxAge(3600) }}复制代码 总结
axios 官方推荐，持续维护，简单的配置就可以完成网络请求，还可以配置拦截器等操作，大大提高我们开发效率。下一篇，我们会讲到 Vue 的组件。