什么是 Vue-resource?
官网原话:
The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
就是说它是一个用 XMLHttpRequest
或 JSONP
提供发出 Web 请求和处理响应服务的 Vue 插件,和它有相同作用的还有axios
对于http服务
Vue实例提供了
.$http
服务,它可以发送HTTP
请求。 请求方法调用返回一个解析为响应的Promise
。 此外,Vue实例将在所有函数回调中自动绑定到此实例。
如何配置 Vue-resource?
1.将 vue-resource.js 文件下载到本地后,引用资源:
<script src="./lib/Vue-2.5.21.js"></script>
<script src="./lib/vue-resource.js"></script>
注意:引用资源时 Vue-resource 应在 Vue 之后,因为 Vue-resource 依赖于 Vue,如上图
如何使用 Vue-resource 发起请求?
最好是去看官方文档
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
getInfo() { //发起get请求
// 成功的回调必须要传,失败的回调是可选的
// 当发起get请求之后,通过.then设置回调成功的函数
console.log("1")
this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function (result) {
// 通过 result.body 请求拿到服务器返回成功的数据
console.log(result.body)
})
},
postInfo() {
// application/x-wwww-form-urlendcoded
// 手动发起 Post 请求,默认没有表单格式,所以,有的服务器处理不了
// 这个时候 通过post的第三个参数, { emulatJSON: true } 设置提交的内容类型 为普通表单数据格式
this.$http.post('http://jsonplaceholder.typicode.com/posts', {}, {emulateJSON: true}).then(result => {
console.log(result.body)
})
},
jsonpInfo() {
this.$http.jsonp("http://jsonplaceholder.typicode.com/posts").then(result => {
console.log(result.body)
})
}
}
})
</script>
p.s. 代码中网址为请求 json
假数据的一个网站
全局配置emulateJSON选项
post
请求中第三个参数往往需要 {emulateJSON: true}
以确保 content-type
为 application/x-wwww-form-urlendcoded
为了避免每次发送post请求都要写上这么一段,可以如官网所言,添加这么一段:
// 全局启用 emulateJSON 选项 完成psot的情况
Vue.http.options.emulateJSON = true;
如此一来就可以省略 post
请求中的第三个参数
全局配置数据接口的根域名
写多了就会发现,我们好像一直在请求的第一个参数中填一大段相同的网站地址,这一点就令人烦躁,反复写这么一段还很可能出错。另外未来在修改的时候工作量也很大。为了避免这一点,如官网所言,添加这么一段:
Vue.http.options.root = "http://jsonplaceholder.typicode.com/";
像这样使用
getAllList() {
this.$http.get("posts").then(result => {
if (result.status === 200) {
// 成功状态
// 注意通过 $http 获取到的数据,都在 result.body 中放着
this.list = result.body;
} else {
alert("获取数据失败!");
}
});
}
如果通过全局配置了请求数据接口根域名,则在每次单独发起http请求的时候,请求的url路径应该以相对路径开头,前面不能带斜线,否则不会启用根路径拼接
讲人话,再说一遍系列:
写在配置的网站地址 http://jsonplaceholder.typicode.com
后面一定要加上一个 /
,
使用的时候我们一定不能在路由前面加上 /
(是 posts
不是 /posts
)
p.s.如果有不足还请指正,多谢
// 本文档搭配 bgm:Gun's & Roses (Paradise Lunch) 使用更佳,因为我就是听它写的