• es6面试问题——Promise


         

       话说刚换工作一个月有余,在上家公司干的实在是不开心,然后就出来抱着试试的心态出来面了几家公司,大多数公司问的前端问题也就那么多,其中有个面试问题让我记忆犹新,只因为没有答上来,哈哈!

      当时面试官问我怎么解决回调函数里面回调另一个函数,另一个函数的参数需要依赖这个回调函数。如:

       $http.get(url).success(function (res) {
                        if (success != undefined) {
                            success(res);
                        }
    
                    }).error(function (res) {                 
                        if (error != undefined) {
                            error(res);
                        }
                    });
      function success (data){
              if(data.id != 0){
                  var  url = "getdata/data?id="+data.id+"";
                   $http.get(url).success(function (res) {
                         showData(res);
                    }).error(function (res) {                 
                        if (error != undefined) {
                            error(res);
                        }
                    });
              }
      }


    一个回调后面有很多依赖的回调,怎么解决这个问题?
    我说封装,return 等等啊,但显然不是面试官想要的解决办法。回来以后问了一下同事,同事说es6 的Promise 可以解决啊,只怪我学识尚浅!然后我就查了一下,然后就豁然开朗了。

    Promise

    我只把我了解的到的记录下来,大家多多指点!
    Promise 构造函数只接收一个函数,这个函数两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实可以理解为成功和失败。你也许会说这有什么用?我们用的时候有可不只是 new Promise(function(resolve,reject){}) 就完了,Promise对象上有then、catch这两个方法,还有很多方法这里就不一一介绍了!
    then接收一个参数,是函数,并且会拿到我们在new Promise()中调用resolve时传的的参数。

    functin fun1(){
        var a = new Promise(resolve,reject){
                      resolve(data);
                    }
        return a ;
    }
    
    fun1().then(function(data){
        console.log(data);
    })

    你以为这就完了?看别人是怎么用的:
    then方法返回的是一个新的Promise实例。因此可以采用链式写法,即then方法后面再调用另一个then方法。

    getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {
      // ...
    });

    上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

    采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

    到这里就可以完美解决回调依赖回调的问题了!

    部分代码借鉴于:阮一峰es6入门 http://es6.ruanyifeng.com/#docs/promise

    奔跑的工程师
  • 相关阅读:
    java基础-集合笔记
    Spring工具类
    XStream的基本使用
    java之路径问题
    Vue 动态组件渲染问题分析
    watch案例解析(element-ui el-select 无法选中问题剖析)
    v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则表单元素,表单无法验证问题剖析 )
    Vue 虚拟Dom 及 部分生命周期初探
    Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果
    AngularJs(SPA)单页面SEO以及百度统计应用(下)
  • 原文地址:https://www.cnblogs.com/wbg21521/p/6757334.html
Copyright © 2020-2023  润新知