这篇文章主要介绍了 AngularJS 的 $http 异步删除数据详解及实例的相关资料, 这里提供实现思路及实现具体的方法, 写的十分的全面细致, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
AngularJS 的 $http 异步删除数据详解及实例
有人会说删除这东西有什么可讲的, 写个删除的 service,controller 调用一下不就完了.
嗯... 看起来是这样, 但是具体实现起来真的有这么简单吗? 首先有以下几个坑
怎么确定数据是否删除成功?
怎么同步视图的数据库的内容?
1. 思路
1. 实现方式一
删除数据库中对应的内容, 然后将 $scope 中的对应的内容 splice
2. 实现方式二
删除数据库中对应的内容, 然后再 reload 一下数据 (也就是再调用一次查询方法, 这种消耗可想而知, 并且还要保证先删除数据再查询)
2. 具体实现方式
删除数据的 service: 用异步, 返回 promise
- service('deleteBlogService',// 删除博客
- ['$rootScope',
- '$http',
- '$q',
- function ($rootScope, $http, $q) {
- var result = {};
- result.operate = function (blogId) {
- var deferred = $q.defer();
- $http({
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
- },// 欢迎加入前端全栈开发交流圈一起学习交流: 864305860
- url: $rootScope.$baseUrl + "/admin/blog/deleteBlogById",
- method: 'GET',
- dataType: 'json',
- params: {
- id: blogId
- }
- })
- .success(function (data) {
- deferred.resolve(data);
- console.log("删除成功!");
- })
- .error(function () {
- deferred.reject();
- alert("删除失败!")
- });
- return deferred.promise;
- };
- return result;
- }])// 欢迎加入前端全栈开发交流圈一起学习交流: 864305860
controller 里面注意事项
要特别注意执行顺序: 确保己经删除完成之后再去 reload 数据, 不然会出来视图不更新
- /**
- * 删除博客
- */
- $scope.deleteBlog = function (blogId) {
- var deletePromise = deleteBlogService.operate(blogId);
- deletePromise.then(function (data) {
- if (data.status == 200) {
- var promise = getBlogListService.operate($scope.currentPage);
- promise.then(function (data) {
- $scope.blogs = data.blogs;
- $scope.pageCount = $scope.blogs.totalPages;
- });// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
- }// 面向 1-3 年前端人员
- });// 帮助突破技术瓶颈, 提升思维能力
- };
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/0bdf8d9424d526605bba5349eef06e0e.html