1. vue-resource
- vue-resource可以用于通过一些简单的方式发起ajax请求
- 其依赖Vue库，因此在使用的时候必须要先把Vue导进来，之后才能使用它
- 可以通过npm进行安装使用
- 当我们初始化Vue对象的时候Vue会以全局的方式将Vue实例挂载到window对象上
- 之后我们使用vue-resource的时候其会将一个
$http对象挂载到Vue实例上
- 同样，这也是全局挂载的方式实现的，因此我们可以在Vue实例的任何地方都可以直接使用
- vue-resource可以发起get、post、jsonp
- Vue-resource的API文档可以在其github主页查看
- 手动发起的post请求一般没有默认表单格式
- 因此我们需要自己去设置post请求的表单格式，也就是application/xxx之类的东西需要我们自己去配置
- 这些内容可以在其官网找到相关的配置选项
发起get请求
getOk: function () {
_that = this
_that.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=北京').then(response => {
console.log(response)
})
}
<input type="button" value="get请求" @click="getOk">
- 我们需要记住的一个post请求的配置选项为emulateJSON，这一配置选项可以将请求体作为application/xxx-form-urlencoded来发送
- 我们只要在post的配置选项里面加上{emulateJSON:ture}就可以了
- 在前后端开发的时候前端和后端所用的端口往往是不一样的，因此我们需要去解决跨域访问的问题，这时候多半都可以使用jsonp来解决跨域访问的问题
- jsonp的实现原理是动态构建script标签来实现的，因为它不受跨域的限制，因此可以解决我们的跨域访问问题
- 发起Ajax请求尽量在create生命周期里面发，因为当用户点进来的时候没有数据将会很尴尬
2. 全局配置数据接口的根域名
- 当我们在构建一个项目的时候有很多地方需要获取同一个服务器的数据，这时候我们在每个地方都添加服务器的域名将会对后期的项目维护来说非常麻烦
- 因此Vue-resource给我们提供了全局配置服务器根域名的简便方式
- 我们可以在vue-resource中设置根域名: vue.http.options.root='/root' 这样就可以在发起请求的时候只写请求路径的文件目录就可以了
- 我们在请求体中写路径的时候不需要在前面加上
/等路径标识符，只需要在后面出现即可
3. 全局配置emulateJSON选项
- 直接可以使用vue.http.options.emulateJSON=ture即可
- 我们也可以将上面的root选项跟emulateJSON选项直接写进vue实例中的http对象
