vue请求数据的方式

1、使用vue-resource

vue-resource体积小、支持主流浏览器（IE9以下也支持）、支持Promise异步计算、支持拦截器
在vue2.0之后vue-resource不再更新，推荐使用axios

1） 安装vue-resource

进入项目根目录
npm install vue-resource --save
一定要加上 --save ，这样可以直接写入package.json

2）在main.js中导入vue-resource

import VueResource from 'vue-resource'
使用此插件
Vue.use(VueResource)

3）开始请求

（1）get请求

如果需要跨域，需要在后台先处理跨域问题

 methods: {
    get () {
      var url = 'http://192.168.0.109:31610/boat/test'
      this.$http.get(url).then((response) => {
        console.log(response)
      }, (err) => {
        console.log(err)
      })
    }
  }

（2）post请求

post请求的参数写在post（）中

 post () {
      var url = 'http://192.168.0.109:31610/boat/test'
      //第二个参数是提交数据，第三个参数是格式（为普通表单）
      this.$http.post(url, {userName: 'yw'，password: '123456'}, { emulateJSON: true }).then((response) => {
        this.msg = response.body
        console.log(response)
      }, (err) => {
        console.log(err)
      })
    }

（3） 使用JSONP请求

jsonp原理:
jsonp请求可以解决跨域访问问题，因为同源策略的影响，不允许进行跨域请求，而Web页面上调用js文件时则不受跨域的影响，也就是script 标签 src 属性中的链接却可以访问跨域的js脚本（任何标签的src都可以），json可以轻量的描述数据，而且js支持json，当通过src调用服务器js文件的时候，只要把服务器的返回数据转化成json然后放入js文件即可。
JSONP就是这样一种协议，客户端通过src调用服务器js文件时候，客户端会传一个callback方法给服务器，服务器将callback参数名取出封装成方法，然后将返回数据放入此封装的方法中。

  jsonp () {
      var url = 'http://192.168.0.109:31610/boat/test'
      this.$http.jsonp(url).then((response) => {
        console.log(response)
      }, (err) => {
        console.log(err)
      })
    }

2、使用axios请求

axios支持 Promise API、拦截请求和响应、转换请求和响应数据、可以取消请求，还能自动转换 JSON 数据，使客户端支持保护安全免受 CSRF/XSRF 攻击

1） 安装axios

进入项目根目录
npm install axios -save

2）使用axios

axios每个页面就要导入一次
import Axios from 'axios'

//get请求
 Axios.get(url).then(function (response) {
        console.log(response)
      }).catch(function (err) {
        console.log(err)
      }
      )
    }

post请求三种方式
Content-Type: application/json

let data = {userName: 'yw', password: '123456'};
 Axios.post(url, data ).then(function (response) {
       console.log(response)
     }).catch(function (err) {
       console.log(err)
     }
     )

Content-Type: multipart/form-data

let data = new FormData();
data.append('userName','yw');
data.append('password','123456');
Axios.post(url, data ).then(function (response) {
      console.log(response)
    }).catch(function (err) {
      console.log(err)
    }
    )

Content-Type: application/x-www-form-urlencoded
先导入import qs from 'Qs'

let data = {userName: 'yw', password: '123456'}
    Axios.post(url, qs.stringfy({data})).then(function (response) {
      console.log(response)
    }).catch(function (err) {
      console.log(err)
    }
    )

3、使用fetch

fetch优点：
fetch是一种HTTP数据请求的方式，它是ajax的一种替代方案，无需安装其他库，使用简单，api简单，是基于Promise实现链式调用的。
fetch缺点：
fetch只对网络请求报错，对400，500会当做成功的请求，
fetch默认不会带cookie，需要添加配置项fetch(url, {credentials: ‘include’})
fetch不支持超时控制
fetch无法监测请求的进度
ie浏览器不支持

1）使用fetch

//get请求
  fetch(url).then(response => response.json())
       .then(data => console.log(data))
       .catch(err => console.log(err))

//post请求
 let requestParams = {userName: 'yw', password: '123456'}
      fetch(url, {
        method: 'post',
        mode: 'cors',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: JSON.stringify(requestParams)
      }).then(response => response.json())
        .then(data => console.log(data))
        .catch(err => console.log(err))