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))