Vue 入门之网络请求
Vue 2.0 之后官方推荐使用 axios 来完成前端的网络请求，不再推荐使用 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 类完成跨域。
@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 的组件。