Promise对象的简单使用

描述

• 异步和同步
  • 异步，操作之间没有关系，同时执行多个操作， 代码复杂
  • 同步，同时只能做一件事，代码简单
• Promise 对象
  • 用同步的方式来书写异步代码
  • Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
  • 改善了可读性，对于多层嵌套的回调函数很方便
  • 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口
• Promise 也是一个构造函数
  • 接受一个回调函数f1作为参数，f1里面是异步操作的代码
  • 返回的p1就是一个 Promise 实例
  • 所有异步任务都返回一个 Promise 实例
  • Promise 实例有一个then方法，用来指定下一步的回调函数

function f1(resolve, reject) {
  // 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成，就会执行f2。

Promise 使得异步流程可以写成同步流程

// 传统写法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

Promise.all(promiseArray)方法

• 将多个Promise对象实例包装，生成并返回一个新的Promise实例
• promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
• 并将所有结果传递results数组中
• promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象
  

/* 有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。 */
      Promise.all([
        $.ajax({ url: "/Promise/test01.txt", dataType: "json" }),
         $.ajax({ url: "/Promise/test02.txt", dataType: "json" })
         ]).then(function(results) {
          let [arr, json] = results;
          alert("成功了！");
          console.log(arr, json);
        },
        function() {
          alert("失败了！");
        }
      );