30ES6之promise实例

最新推荐文章于 2019-06-03 14:12:00 发布

weixin_30725467

最新推荐文章于 2019-06-03 14:12:00 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10966380.html

版权

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: red;" id="ballA"></div>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: yellow;" id="ballB"></div>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: blue;" id="ballC"></div>
<script>
  var ballA = document.getElementById('ballA');
  var ballB = document.getElementById('ballB');
  var ballC = document.getElementById('ballC');
  function move(element, target) {
    return new Promise(function (resolve,reject) {
      var left = parseInt(getComputedStyle(element, null)['marginLeft']);
      element.timer = setInterval(function () {
        if (left < target) {
          element.style.marginLeft = ++left + 'px';
        } else {
          clearInterval(element.timer);
          resolve && resolve();
        }
      }, 13)
    })
  }
  move(ballA, 100)
          .then(function () {
            return move(ballB, 100);
          })
          .then(function () {
            move(ballC, 100);
          });
/*   1、move(ballA, 100)执行时生成第1个promise实例promiseA；promiseA在生成过程中遇到异步，向下执行第1个then方法，将回调函数function (){return move(ballB, 100);}（姑且称作callbackA），注入到自己的成功的回调里，同时内在机制返回第2个promise实例promiseB；promiseB向下执行第2个then方法，将函数function (){return move(ballC, 100);}（姑且称作callbackB），注入到自己的成功的回调里。
    2、现在promiseA执行自己的成功的回调callbackA，尽管它是异步，但因为有return阻断，所以只能在它执行完以后，promiseB才能执行自己的成功的回调callbackB；如果没有callbackA的return的阻断，那么callbackA就不会阻断callbackB的执行，即两者同时执行。*/
</script>
</body>
</html>
```
附：双层then的运用一：
```javascript

function outer(obj){
    var deferred = $q.defer();
    $http(obj).then(function (result) {
        deferred.resolve(result);
    }).catch(function(result){
       deferred.reject(result);
    }).finally(function(){

    });
    return deferred.promise;
}
outer().then(function(result){}).catch(function(result){});

```
附：双层then的运用二：promise外实例是同步的，promise内实例是异步的；外实例注入的函数，通过形参传进内实例注入的函数中执行。
```javascript
import request from '@/utils/request'
import {
  MessageBox
} from 'element-ui'
export default function query(config) {//(1)执行query函数；
  return new Promise((resolve, reject) => {//(2)new；(5)返回“有形参的”promise“外”实例;
    //以下是弹窗
    MessageBox.confirm(//执行时返回promise实例，注入then函数，阻断后面代码的执行；弹窗消失(不是异步结束)时执行then函数；以前手写的弹窗与promise无关
      config.q || '确定继续操作？',
      '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      //以上是弹窗
      .then(() => {//弹窗消失时执行的then函数
        request(config.data)//(3)执行时，遇到异步，返回“看不见的”promise“内”实例，注入then函数；
          .then(res => {//(7)异步执行完毕，执行then函数。
            resolve()//(8)执行形参函数，即执行(6)
          })
          .catch(error => {
            reject(error)
          })
      })
      .catch(() => {
        console.log('click cancel')
      })

  })//(4)顺序执行到此
}//(6)注入“自定义的”实参函数；
```

附：正文替代品（可以删除）
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: red;" id="ball1"></div>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: yellow;" id="ball2"></div>
<div style="margin-left: 0; width: 100px;height: 100px;border-radius: 50%;background: blue;" id="ball3"></div>
<script>
    var ball0 = document.getElementById('ball1');
    var ball1 = document.getElementById('ball2');
    var ball2 = document.getElementById('ball3');
    function move(element, target) {
        return new Promise(function (resolve,reject) {
            var left = parseInt(getComputedStyle(element, null)['marginLeft']);
            element.timer = setInterval(function () {
                if (left < target) {
                    element.style.marginLeft = ++left + 'px';
                } else {
                    clearInterval(element.timer);
                    resolve && resolve();
                }
            }, 13)
        })
    }
    move(ball0, 100)
    /* 1、move(ball0, 100)执行时生成第1个promise实例promiseA；promiseA在生成过程中遇到异步，向下执行第1个then方法，将回调函数function (){return move(ball1, 100);}（姑且称作callbackA），注入到自己的成功的回调里，同时内在机制返回第2个promise实例promiseB；promiseB向下执行第2个then方法，将函数function (){return move(ball2, 100);}（姑且称作callbackB），注入到自己的成功的回调里。
    2、现在promiseA执行自己的成功的回调callbackA，尽管它是异步，但因为有return阻断，所以只能在它执行完以后，promiseB才能执行自己的成功的回调callbackB；如果没有callbackA的return的阻断，那么callbackA就不会阻断callbackB的执行，即两者同时执行。*/
            .then(function () {
                return move(ball1, 100);
            })
            .then(function () {
                move(ball2, 100);
            })

</script>
</body>
</html>
```