JavaScript Promise

异步编程

同步(synchronous)：同步按照代码顺序执行。
异步(asynchronous)：异步不按照代码顺序执行。

JS异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数是一个函数，在启动一个异步任务的时候告诉它，等你完成这个任务之后要做什么。主线程不用关系异步任务的状态了。

function print() {
  document.getElementById("demo").innerHTML="RUNOOB";
}
setTimeout(print, 3000);

异步Ajax

除了setTimeout函数以外，异步回调也应用于Ajax变成。
XMLHttpRequest常用于请求来自远程服务器上的XML或JSON数据，一个标准的XMLHttpRequest对象包含多个回调。

JavaScript Promise

Promise是ECMAScript6提供的类，为了更快捷优雅的编写异步任务。

• 构造Promise

new Promise(function(resolve, reject){
  
});

代码比对

// 采用函数瀑布实现
setTimeout(function() {
  console.log("First");
  setTimeout(function() {
    console.log("Second");
  },4000);
}, 1000);
 
// 采用new Promise实现
new Promise(function(resolve, reject){
  setTimeout(function(){
    console.log("First");
    resolve();
}, 1000);
}).then(function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function () {
      console.log("Second");
      resolve();
    }, 4000;
  });
}).then(function(){
});

Promise的使用

Promise构造函数只存在一个参数，是一个函数，这个函数在构造之后会直接被异步执行。
当Promise被构造的时候，起始函数被异步执行；

new Promise(function(resolve, reject) {
  console.log("Run");
});

Promise类中存在3个方法【.then()】【.catch()】和【.finally】三个方法
三个方法的参数都是一个函数，

• .then()可以将参数中的函数添加到当前Promise的正常执行序列。
• .catch()则设定Promise的异常处理序列。
• .finally()在Promise执行的最后一定会执行序列。

.then()传入的函数会按照顺序依次执行，有任何异常都会直接跳到catch序列；

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。
 
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。
 
但是请注意以下两点：
 
resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

Promise对象代表一个异步操作。存在3中状态： Pending(进行中）、Resolved(已完成 fulfilled) 和 Rejected(已失效)
通过回调里的 resolve(data) 将这个 promise 标记为 resolverd，然后进行下一步 then((data)=>{//do something})，resolve 里的参数就是你要传入 then 的数据。