http请求--ajax

1. 什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功 能特点如下：

• 从浏览器中创建XMLHttpRequests

• 从node.js创建http请求

• 支持Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换JSON数据>

• 客户端支持防御XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

2.为什么要使用 Axios

由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以 后停止了对该插件的维护并推荐了 Axios 框架

3.Axios的使用

1）安装vue axios

npm install --save axios vue-axios

2）在main.js中引入

在项目中使用axios模块

import Vue from 'vue' 
import axios from 'axios' 
import VueAxios from 'vue-axios' 
Vue.use(VueAxios, axios)

3）发送ajax请求

this.axios({ 
  method:'get', 
  url:'http://bit.ly/2mTM3nY', 
  data:{} 
}).then(function (response) { 
  console.log(response.data) 
});

4）服务端解决跨域问题

  <mvc:cors> 
    <mvc:mapping path="/**" 
        allowed-origins="*" 
        allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH" 
        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested- With" 
        allow-credentials="true" /> 
  </mvc:cors>

在spring-mvc.xml中加入上述这一段。其中，allowed-origins指的是允许的访问源的域名，"*"表示任何人都可以 访问，也可以指明具体的域名

5）解决axios无法传递data中的参数问题

原因：默认情况下发送axios时请求头中的内容类型为：

Content-Type:application/json;charset=UTF-8

而实际服务端需要的是：

Content-Type:application/x-www-form-urlencoded

因此，使用axios的qs内置库中的方法进行内容类型的转换。

import Qs from 'qs' 
this.axios({

method:'post',

url:'http://localhost:8081/regist',

transformRequest: [function (data) {

return Qs.stringify(data)

}],

data:{

email:this.email

}

}).then(function (response) {

alert(response.data.message)

});