ajax中的promise ES6中promise

1. 例子

1）promise all方法是并行执行的  同时返回全部的执行结果

/* promise all方法是并行执行的  同时返回全部的执行结果*/
 //切菜
function cutUp(){
    console.log('开始切菜。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('切菜完毕！');
            resolve('切好的菜');
        }, 9000);
    });
    return p;
}
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new Promise(function(resolve, reject){        
    	//做一些异步操作
        setTimeout(function(){
            console.log('烧水完毕！');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}
//煮汤
function boil2(){
    console.log('开始煮汤。');
    var p = new Promise(function(resolve, reject){        
    	//做一些异步操作
        setTimeout(function(){
            console.log('煮汤完毕！');
            resolve('煮好的汤');
        }, 3000);
    });
    return p;
}
Promise.all([cutUp(), boil(),boil2()])
    .then((result) => {
        console.log('准备工作完毕');
        console.log(result);
 }) 

2）与promise all方法相同的jquery用法 

//  $.when的用法 与ES6的all的参数稍有区别，它接受的并不是数组，而是多个Deferred对象
// 尝试修改setTimeout的时间看看执行结果
//  $.when是并行执行的
   console.log('返回一个受限的Deferred对象')
 function runAsync(){
	 console.log('runAsync');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成');
         def.resolve('随便什么数据');
     }, 2000);
     return def.promise(); //就在这里调用
 }
 function runAsync2(){
	 console.log('runAsync2');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成2');
         def.resolve('随便什么数据2');
     }, 4000);
     return def.promise(); //就在这里调用
 }
 
 function runAsync3(){
	 console.log('runAsync3');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成3');
         def.resolve('随便什么数据3');
     }, 1000);
     return def.promise(); //就在这里调用
 }
 
 $.when(runAsync2(),runAsync() , runAsync3())
 .then(function(data1, data2, data3){
     console.log('全部执行完成');
     console.log(data1, data2, data3);
 });

3)链式调用 队列执行 将多个函数顺序执行 

3.1）ES6

//原文地址：https://www.cnblogs.com/zhaoyongblog/p/12869497.html
var p1 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p1')
            }, 1000);
        })
    }
    var p2 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p2')
            }, 500);
        })
    }
    var p3 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p3')
            }, 100);
        })
    }
var fnArr = [p2, p1, p3];
var run = function (arr, start = 0){
     if(start > arr.length || start < 0) return; // 参数start不能超过    arr.length，不能为负数
     var next = function (i){
         if(i < arr.length){
              var fn = arr[i];
              fn().then(res => {
                  console.log(res);
                  i++;
                  next(i)
              })
          }
      }
      next(start)
 }
run(fnArr); // 执行方法

3.2）jquery用法

 var jsonData='[{"age":32,"name":"zhangsan0","nickName":"zhangsan0"},{"age":32,"name":"zhangsan1","nickName":"zhangsan1"},{"age":32,"name":"zhangsan2","nickName":"zhangsan2"},{"age":32,"name":"zhangsan3","nickName":"zhangsan3"},{"age":32,"name":"zhangsan4","nickName":"zhangsan4"}]';
  function runAsync(p){
      var def = $.Deferred();
      //做一些异步操作
      setTimeout(function(){
    	  console.log(p.name,p.nickName);//验证参数能否正常传递进来
         //console.log('执行完成');
          def.resolve(p);
      }, 2000);
      return def.promise(); //返回一个受限的Deferred对象
  }
 var jsonArr=JSON.parse(jsonData);
  var fnArr = [];
 for(var json in jsonArr){
 	var p1=  runAsync(jsonArr[json]);
//p1是runAsync的返回结果了，这个地方是错误的
 	fnArr.push(p1);
 }
 var run = function (arr, start = 0){
     if(start > arr.length || start < 0) return; // 参数start不能超过    arr.length，不能为负数
     var next = function (i){
         if(i < arr.length){
              var fn = arr[i];
              fn.then(res => {
                  console.log(res);
                  i++;
                  next(i)
              })
          }
      }
      next(start)
 }
 
 run(fnArr); // 执行方法

 

4）超简单的串行加载工具, 不想引入框架时, 可以试用下

 /* (function (all) {
        var callee = arguments.callee;
        var caller = arguments.callee.caller;
        console.log('callee');
        console.log(callee);
        console.log('caller');
        console.log(caller);
        all.shift()(function(data) {
            callee.call(null, all, data);
        });
    })([
        function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>first';

                next();
            }, 1000)
        }, function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>second';

                next();
            }, 2000)
        }, function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>third';

            }, 3000)
        }
    ]);*/


    function random(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
    var jsonData='[{"age":32,"name":"zhangsan0","nickName":"zhangsan0"},{"age":32,"name":"zhangsan1","nickName":"zhangsan1"},{"age":32,"name":"zhangsan2","nickName":"zhangsan2"},{"age":32,"name":"zhangsan3","nickName":"zhangsan3"},{"age":32,"name":"zhangsan4","nickName":"zhangsan4"}]';


    //要执行的方法 放入数组
    var jsonArr=JSON.parse(jsonData);
    //要执行的函数 放入数组
    var fnArr = [];
    for(var json in jsonArr){
        var next=function(next,p){
            //做一些异步操作
            setTimeout(function(){
                console.log(p.name,p.nickName);//验证参数能否正常传递进来
                next();
            }, 1000*random(1,5));//随机数字
        }
        fnArr.push(next);
    }

    var  mMethod= function (all,params) {
        //在函数内部，有两个特殊的对象：arguments 和 this
        //callee该属性是一个指针，指向拥有这个 arguments 对象的函数
        //caller这个属性中保存着调用当前函数的函数的引用，
       // 如果是在全局作用域中调用当前函数，它的值为 null
        var callee = arguments.callee;
        //
        // var caller = arguments.callee.caller;

        if(all.length<1) return;
        all.shift()(function(data) {
           /* call()方法与 apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于 call()
            方法而言，第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用
            call()方法时，传递给函数的参数必须逐个列举出来 */

            callee.call(null, all,params,data);
        },params.shift());
    };
    mMethod(fnArr,jsonArr);
    //注意观察输出结果，严格按照了数组中元素的先后顺序

 

参考：

bluebird.js - 让所有浏览器都支持 ES6 Promise 对象

https://www.baidu.com/link?url=JzFKFWql03oLbutoFDy-5xe1nclVoJ2UDJHEJdBfpF7LRR_okf_IeUE6UDAxFiiM&wd=&eqid=aed489160027b68d000000025f258710

认识jQuery的Promise的具体使用方法

https://www.jb51.net/article/125354.htm

https://www.jianshu.com/p/1b63a13c2701

https://blog.youkuaiyun.com/tjcjava/article/details/93487993