angularJS中的promise模式以及通过$q解决异步

最新推荐文章于 2019-05-08 18:52:00 发布

Coder.SirLoin

最新推荐文章于 2019-05-08 18:52:00 发布

阅读量2.5k

点赞数 1

分类专栏： angularJs

本文链接：https://blog.youkuaiyun.com/Sourcecode_poet/article/details/53510095

版权

angularJs 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了回调函数的概念及其在JavaScript中的应用，并对比了Promise如何简化异步编程，避免回调地狱，实现更清晰的代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言
说到promise，不得不说的就是回调函数
那么什么是回调函数呢？

function test(callback){//有一个叫做test的function
  var a=1;
  a=2;
  callback();
}
function b(){//有一个叫做b的function
 var c=0;
 c++;
}
test(b); //在test中所有代码都执行结束最后调用b function，这种就是回调函数

觉得没有结合具体的业务场景?
再来个示例：

function test(param1, param2, callback){
  var num;
  num=param1*param2+param1;
  callback(num);
}
test(10,20.function(num){ //调用test,传入参数，以及将具体的function写入回调函数中
    console.log(num);
});

看了上面的这个例子，应该大概知道回调函数是什么东西了吧

那么promise和回调函数之间的关系和区别又是什么呢？
promise本质就是回调函数，它是一种通过回调函数来解决异步问题的方式，只不过我们是通过链式的方式去调用的，
由于我们在调用接口时，如果代码在拿到服务器返回的参数之前就向下进行，那么应用肯定会出错
正是为了解决调用接口时的数据异步问题，我们才会使用promise，我们可以把promise理解成一项任务，只有当我们的任务完成的时候
我们才会返回promise，来表示我的任务完成了，在这之后我们再执行后面的代码，就可以保证应用不出错
总结一下：Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件。
大家可能会说，我们不使用promise的方式也能保证代码不出错，
一般大家的做法是这样的：

$http.get('url1').success(function (d1) {
     $http.get('url2').success(function (d2) {
         //处理逻辑
     });
 });

多层数据请求的嵌套，这种方式我们把调用接口2的代码写在接口1的.success()中，而.success本质也是一个promise
只不过这个promise不是我们写的，而是$http服务中帮我们实现了的

如果我们想自己写promise的话
可以这样：
首先在service中定义了一个叫做publicPost的方法

promise.the()就是当$http请求服务器数据结束后，执行完.success()或.error()之后，将要执行的代码

.service('publicService',['$http','$q',function($http,$q){
  var self = this;
  this.publicPost=function(outerUrl,outerParam,sucFun,failFun,flag){
    var deffered=$q.defer();
    var promise = deffered.promise;
     var a = $http.post(outerUrl, outerParam).success(function (result) {
        //some code
        console.log("Success");
        deffered.resolve();
      }).error(function (error) {
        console.log(error);
        //some code
        deffered.reject();
      });
      promise.then(function () {
        sucFun();
        if (flag == 0) {
          console.debug("成功,flag为0");
        } else if (flag == 1) {
          console.debug("成功,flag为1");
        }
      },function () {
        failFun();
        if (flag == 0) {
          console.debug("失败,flag为0");
        } else if (flag == 1) {
          console.debug("失败,flag为1");
        }
      });
    return a;

  };
}]);

调用定义好的service中的方法

publicService.publicPost("your url","your param",fun1(),fun2(),0).success(function(result){
    //success
 }).error(function(err){
   //error
 }).then(function(){//这个function执行了是因为service中publicPost()中的deffered.resolve()执行了，实际执行的funtion就是promise.then()中的第一个function
   console.log("without problem");
   //secondPost();
 },function(){//这个function执行了是因为service中publicPost()中的deffered.reject()执行了，实际执行的function就是promise.then()中的第二个function
   console.log("with problem");
 });

结合上面的代码，相信大家对angularJs中的promise模式以及链式调用有了更多的了解了吧