Vue.js使用-http请求

Vue.js使用-ajax使用
1.为什么要使用ajax
前面的例子，使用的是本地模拟数据，通过ajax请求服务器数据。

2.使用jquery的ajax库示例

new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;$.ajax({url: 'http://localhost:20000/my_test',type: 'get',dataType: 'json',success: function (data) {vm.$set('peoples', data.result);},error: function(xhr, errorType, error) {alert('Ajax request error, errorType: ' + errorType +  ', error: ' + error)}});}}
})

3.vue-resource库
vue是基于数据驱动的，不需要直接操作DOM，因此没有必要引入jquery
vue提供了一款轻量的http请求库，vue-resource
vue-resource除了提供http请求外，还提供了inteceptor拦截器功能，在访问前，访问后，做处理。

4.vue-resource语法-使用$http对象

// 基于全局Vue对象使用http
Vue.http.get('/someUrl',[options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl',[body],[options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl',[options]).then(sucessCallback, errorCallback);
this.$http.post('/someUrl',[body],[options]).then(successCallback, errorCallback);

then方法的回调函数写法有两种，第一种是传统的函数写法，第二种是更简洁的Lambda表达式写法。

//传统写法
this.$http.get('/someUrl',[options]).then(function(response){//响应成功回调
},function(response){//响应错误回调
});//Lambda写法
this.$http.get('someUrl',[options]).then((response)=>{//响应成功回调
},(response)=>{//响应错误回调
});

5.vue-resource示例

<script src="js/vue-resource.js"></script>
<script>
new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;vm.$http.get('http://localhost:20000/my_test').then(function (data) {var newdata = JSON.parse(data.body)vm.$set('peoples', newdata.result)}).catch(function (response) {console.log(response)})}}})
</script>

6.vue-resource用法-使用resource对象除了使用resource对象除了使用resource对象除了使用http对象访问http，还可以使用$resource对象来访问。
resource服务默认提供以下几种action:
get:{method: ‘GET’},
save:{method: ‘POST’},
query:{method: ‘GET’},
update:{method: ‘PUT’},
remove:{method: ‘DELETE’},
delete:{method: ‘DELETE’},

resource对象使用示例如下：

new Vue({el: '#app',data: {searchQuery: '',columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],peoples: []},ready: function () {this.getPeoples();},methods: {getPeoples: function () {var vm = this;var resource = this.$resource('http://localhost:20000/my_test')resource.get().then(function (data) {var newdata = JSON.parse(data.body)vm.$set('peoples', newdata.result)}).catch(function (response) {console.log(response)})}}})

7.拦截器interceptor
语法如下：

Vue.http.interceptors.push(function(request, next){//...//请求发送前的处理逻辑//...next(function(response){//...//请求发送后的处理逻辑//...//根据请求的状态，response参数会返回给successCallback或errorCallbackreturn response})})

8.拦截器interceptor使用示例

<div id="help"><loading v-show="showLoading"></loading></div>
<template id="loading-template"><div class="loading-overlay"><div class="sk-three-bounce"><div class="sk-child sk-bounce1"></div><div class="sk-child sk-bounce2"></div><div class="sk-child sk-bounce3"></div></div></div></template>
<script>
var help = new Vue({el: '#help',data: {showLoading: false},components: {'loading': {template: '#loading-template'}}})Vue.http.interceptors.push(function(request, next){help.showLoading = truenext(function (response) {help.showLoading = falsereturn response})})
</script>

9.vue-resource的优点
vue-resource比jquery轻量，可以使用Vue.http或者Vue.resource处理HTTP请求，两者没有什么区别。
另外可以是用interceptor在请求前和请求后附加一些行为。

Vue.js使用-http请求相关推荐

axios java 参数,vue.js axios发请求时,参数包括dto和一个flag, 后台如何接?
1.vue.js使用axios向后台发请求. 传递参数中包含一个object,一个string. object到后台用javaBean接, String到后台用String接. 2.前台代码遇新是直朋 ...
Vue.js跨域请求配置、Node.js设置允许跨域
Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码: // 跨域处理proxyTable: {'/api': { // 匹配所有以 '/api' ...
js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
js怎么函数怎么给另一个函数传值并且不调用_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
js处理请求最多的服务器,vue.js 请求服务器
理解vue ssr原理,自己搭建简单的ssr框架先附上demo地址:https://github.com/wmui/vue-s... 第一步:编写entry-client.js和entry-serv ...
Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据（如何实现类似用户手动点击 “查看更多“ ，然后请求分页懒加载数据填充）可适用于 Nuxt.js 、uni-app 等 Vue.js
前言如果您需要 "页面上拉触底" 加载,请参考:uni-app | 微信小程序本文从 0-1 带您完成该功能,支持 Vue.js / Nuxt.js 等, 如下图所示,支持分页 ...

Vue.js使用-http请求

Vue.js使用-http请求相关推荐

最新文章

热门文章