美文网首页
es6 promise

es6 promise

作者: 香芋牛奶面包 | 来源:发表于2017-09-29 18:15 被阅读14次

    看个对ajax的简单模仿,当然真正的ajax并不是这样实现的:

    function ajax(object){ //
      console.log("start ajax --------");
      object.success("data is '" + object.data + "' and acrossAjax");
    }
    
    ajax({
      data: 'milk',
      success: (data) => {
        console.log(data);
      }
    });
    

    控制台 输出:
    start ajax --------
    data is 'milk' and acrossAjax

    当我们在一个ajax 中依赖上一个请求的参数需要进行下一次的ajax请求时会怎么做呢?

    ajax({
      data: 'milk',
      success: (data) => {
        console.log(data);
        ajax({
          data: data,
          success: (data) => {
            console.log(data);
         }
      });
      }
    });
    

    控制台输出:
    start ajax --------
    data is 'milk' byAjax
    start ajax --------
    data is 'data is 'milk' byAjax' byAjax

    这样子看起来 代码已经不太直观了,层层嵌套。这还只是两层,如果是三层 或则更多呢? 这就引出了promise
    再让我们来看看promise 对这种情况是怎么实现的

    /*********************** es6 promise start ********************/

    function ajax(object){ // 封装一个支持promise的ajax
      let promise = new Promise((resolve, reject) => {
        console.log('start promise -----');
        resolve("data is '" + object.data + "' byAjax");
    });
      return promise;
    }
    
    ajax({
      data: 'milk',
    })
    .then((data) => {
      console.log(data);
      return data; // 返回普通变量对象 这时then返回的是一个初始的promise对象,不是ajax 这个
    })
    .then((data) => {
      console.log(data);
      return ajax({data: data}); // 返回新的 ajax promise对象
    })
    .then((data) => {
      console.log(data);
    });
    

    控制台输出:
    start promise -----
    data is 'milk' byAjax
    data is 'milk' byAjax
    start promise -----
    data is 'data is 'milk' byAjax' byAjax

    相关文章

      网友评论

          本文标题:es6 promise

          本文链接:https://www.haomeiwen.com/subject/xmxwextx.html