Vue 入门之网络请求

Vue 2.0 之后官方推荐使用 axios 来完成前端的网络请求，不再推荐使用 vue-resource 了。下面我们安装使用 axios，来完成的常见的 get ，post 请求。并解决常见的跨域问题。
而axios的强大包括以下几点：

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 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 类完成跨域。

@Configuration
class CrossFiledConfig:WebMvcConfigurerAdapter() {


    override fun addCorsMappings(registry: CorsRegistry) {
        super.addCorsMappings(registry)
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","DELETE","PUT")
                .maxAge(3600)
    }

}

总结

axios 官方推荐，持续维护，简单的配置就可以完成网络请求，还可以配置拦截器等操作，大大提高我们开发效率。下一篇，我们会讲到 Vue 的组件。