正文
在Vue中ajax请求时，推荐使用 axios 、 vue-resource 这两个库。同步请求时使用 axios，异步请求时使用vue-resource。 axios 、 vue-resource 都是基于 Promise 的 HTTP 库。
axios
axios.post('/ajax/demo_axios_post.php', {firstName: 'Fred'})
.then(function (response) {
console.log(response);
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
vue-resource
this.$http.post('/monitor/member-info',
{id: id},
{emulateJSON: true}
).then(function (res) {
if (res.body.code == 200) {
return res.body.data;
} else {
return false;
}
}, function (res) { // 请求失败处理
return false;
});
使用中碰到一个问题，怎么在另一个方法中（editMember）调用vue-resource方法（getMemberInfoById）返回的内容，看一下实现：
new Vue({
el: '#app',
data() {
return {
member_form: {}
}
},
mounted() {
},
methods: {
// 获取组员详情
getMemberInfoById(id) {
return this.$http.post('/monitor/member-info',
{id: id},
{emulateJSON: true}
).then(function (res) {
if (res.body.code == 200) {
return res.body.data;
} else {
return false;
}
}, function (res) {
return false;
});
},
// 组员编辑页面
editMember(id) {
this.getMemberInfoById(id).then(
function (info) {
if (info.id && info.id > 0) {
this.member_form = {
id: info.id,
name: info.name
}
}
},
);
},
},
});
因为 vue-resource 都是基于 Promise 的，所以我们可以返回 Promise ，然后用 Promise 的方法来使用结果。
深层监听
附带说一下Vue的深层监听。
var vm_monitor_business = new Vue({
el: '#monitor_business',
data: {
owners: [],
search: {
owner_id: '',
business: ''
},
search_order: {
name: 'id',
type: 1
},
total: 0,
lists: [],
page_num: 1,
},
computed: {
},
methods: {
pageBox(total) {
if (total> 0) {
$('#pagination-box').jqPaginator({
totalCounts: total,
pageSize: 10,
visiblePages: 8,
currentPage: 1,
onPageChange: function (num) {
vm_monitor_business.page_num = num;
}
});
$('#pagination-box').show();
} else {
$('#pagination-box').hide();
}
},
changeOrderType(order_name) {
if (this.search_order.name != order_name) {
this.search_order.name = order_name;
this.search_order.type = 1;
} else {
if (this.search_order.type === 1) {
this.search_order.type = 0;
} else {
this.search_order.type = 1;
}
}
},
getBusinessOwners() {
this.$http.get('/monitor/business-owners').then(function(res){
if (res.body.code == 200) {
this.owners = res.body.data;
}
}, function(res){
});
},
getBusinessTotal() {
this.$http.post('/monitor/business-total',
{owner_id: this.search.owner_id, business: this.search.business},
{emulateJSON:true}
).then(function(res){
if (res.body.code == 200) {
this.total = res.body.data.total;
this.pageBox(this.total);
}
}, function(res){
$.toast({
position: 'top-center', icon: 'error', stack: false,
heading: 'Error', text: '获取异常',
});
});
},
getBusinessList() {
ZENG.msgbox.show("正在加载数据...", 6);
this.$http.post('/monitor/business-list',
{
owner_id: this.search.owner_id,
business: this.search.business,
order_name: this.search_order.name,
order_type: this.search_order.type,
page_num: this.page_num
},
{emulateJSON:true}
).then(function(res){
ZENG.msgbox.hide();
if (res.body.code == 200) {
this.lists = res.body.data.lists;
} else {
$.toast({
position: 'top-center', icon: 'error', stack: false,
heading: 'Error', text: res.body.msg,
});
}
}, function(res){
$.toast({
position: 'top-center', icon: 'error', stack: false,
heading: 'Error', text: '获取异常',
});
});
},
getBusinessPageDate() {
this.getBusinessTotal();
this.getBusinessList();
},
// 获取组员详情
getBusinessInfoById(id) {
return this.$http.post('/monitor/business-info',
{id: id},
{emulateJSON:true}
).then(function(res){
ZENG.msgbox.hide();
if (res.body.code == 200) {
return res.body.data;
} else {
$.toast({
position: 'top-center', icon: 'error', stack: false,
heading: 'Error', text: res.body.msg,
});
return false;
}
}, function(res){
$.toast({
position: 'top-center', icon: 'error', stack: false,
heading: 'Error', text: '获取异常',
});
return false;
});
},
},
watch: {
search: {
handler(newVal, oldVal) {
this.getBusinessPageDate();
},
deep: true
},
search_order: {
handler(newVal, oldVal) {
this.getBusinessList();
},
deep: true
},
page_num: function(newVal, oldVal) {
this.getBusinessList();
}
},
created: function() {
this.getBusinessOwners();
this.getBusinessPageDate();
}
})
其他
还有一个实例可以看一下 https://ibaiyang.github.io/blog/jquery/2020/09/11/jQuery分页插件jqPaginator.html#vue中实现
参考资料
Vue.js Ajax(axios) https://www.runoob.com/vue2/vuejs-ajax-axios.html
Vue.js Ajax(vue-resource) https://www.runoob.com/vue2/vuejs-ajax.html