Promise 对象

作者: faremax | 来源:发表于2017-10-03 17:28 被阅读5次

Promise,async,await笔记
Promise then方法的链式调用
ES6之promise(resolve与reject)
ES6-Promise对象 (下)
Promise对象原理解析
ES6之promise(基本用法)
Promise用法小结
关于Promises
Promise
Promise

Promise 建立

Promise 对象用来传递异步操作消息，代表一个未来才会知道结果的事件，并且对不同事件提供统一的 API 以便进一步处理。Promise 具有以下特点：

由异步操作结果决定改状态，其他操作绝不影响该状态；
对象状态不受外界影响：Promise 代表的异步操作有三个状态：

Pending: 进行中
Resolved: 已完成(Fulfilled)
Rejected: 已失败

一旦状态改变，就不会再变：Promise 的状态只有2种可能：

从 Pending 到 Resolved
从 Pending 到 Rejected

对于同一个 promise, 当以上状态发生一个(只能发生其一)，就不会再改变了。之后任何时间你都能得到这个状态，且永不改变。
有了 Promise 就可以将层层的回调写为同步的样子，表示起来更清晰。不过需要注意以下几点：

Promise 一旦建立就立即执行，并且无法中断或取消
如果没有设置回调函数，那么 Promise 中的产生的错误不会抛到外部
Pending 状态时，我们无法知道其具体进度

Promise 的基本结构如下：

var promise = new Promise(function(resolve, reject){
  if(/*异步操作成功*/){
    resolve(value);
  } else {
    reject(error);
  }
});

构造函数接受一个回调函数为参数，回调函数具有2个参数，也都是函数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。resolve 的接受一个参数——值或另一个 promise 对象； rejectj接受一个参数——错误。需要说明的是，这里的 resole 和 reject 函数已经由系统部署好了，我们可以不写。

promise 构建好以后我们就可以调用它的then()方法，then(resolve(value){},reject(value){})方法接受2个函数参数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。其中 reject 参数是可选的。和构造函数不同的是，then 方法的 reject 和 resolve 都使用 promise 传出的值作为其唯一的参数。

这里写一个简单的例子，理解一下：

function timeout(ms){
  return new Promise((resolve, reject) => {
    console.log("promise");            //"promise"
    setTimeout(resolve, ms, 'done');
  });
}
timeout(2000).then((value) => {
  console.log(value);                  //2秒后得到 "done"
});

利用 Promise 异步加载图片：

function loadImageAsync(url){
  return new Promise(function(resole, reject){
    var image = new Image();
    image.onload = function(){
      resolve(image);
    };
    image.onerror = function(){
      reject(new Error(`Could not load image at ${url}`));
    };
    image.src = url;
  });
}

利用 Promise 实现 Ajax：

  var id = document.getElementById("primary");
  var getJSON = function(url){
    var promise = new Promise(function(resolve, reject){
      var client = new XMLHttpRequest();
      client.open("GET", url);
      client.onreadystatechange = handler;
      client.response = "json";
      client.setRequestHeader("Accept", "application/json");
      client.send();

      function handler(){
        if(client.readyState !== 4) return;
        if(this.status === 200){
          resolve(client.response);
        } else {
          reject(new Error(this.statusText));
        }
      }
    });
    return promise;
  }
  getJSON('info.json').then(
    json => id.innerHTML = "<pre>" + json + "</pre>",
    err => id.innerHTML = err
  );

如果 resolve 的参数是一个promise：

var p1 = new Promise(function(resolve, reject){
  //...
});
var p2 = new Promise(function(resolve, reject){
  //...
  resolve(p1);
});

上面代码中 p1 的状态传给了 p2，也就是p1运行完成(状态为 resolve 或 reject)后 p2 的回调函数会立刻开始执行：

var p1 = new Promise(function(resolve, reject){
  setTimeout(() => reject(new Error('failed')), 3000);
});
var p2 = new Promise(function(resolve, reject){
  setTimeout(() => resolve(p1), 1000);
});
p2.then(result => console.log(result));
p2.catch(error => console.log(error));

p1 建立，进入 setTimeout 异步计时器。之后 p2 建立，进入 setTimeout 异步计时器。1s 后 p2 准备执行 resolve, 但是 resolve 的参数是 p1, 此时 p1 还是 Pending 状态，所以 p2 开始等待。又过了 2s, p1 的 reject 执行，变为 rejected 状态，随即 p2 也跟着变成 rejected 状态。

Promise 对象方法

then() 方法
then(resolve(value){},reject(value){})方法接受2个函数参数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。其中 reject 参数是可选的。和构造函数不同的是，then 方法的 reject 和 resolve 都使用 promise 传出的值作为其唯一的参数。
then() 方法返回一个新的 Promise 实例，注意，不是之前那个。因此可以用链式调用，不断添加"回调"函数。 then 的返回值成了下一个 then 中回调函数的参数：

var p = new Promise(function(resolve, reject){
  resolve("from new Promise");
}).then(function (value){
  console.log(value);     //from new Promise    其次输出这个
  return "from the first 'then'";
}).then(function(value){
  console.log(value);     //from the first 'then'    最后输出这个
  return "from the second 'then'";
});
console.log(p);           //Promise{...}    先输出这个

注意，如果 promise 的状态是 resolved 则执行 then参数中的第一个回调函数；如果 promise 的状态是 rejected 则执行 then参数中的第二个回调函数。这个状态是不断传递下来的，这一点和之前的例子类似。

catch() 方法:
catch(reject) 方法是 then(null, reject) 的别名，在发生错误的时候执行其参数函数:

new Promise(function(resolve, reject){
  resolve("resolved");
}).then(function(val){
  console.log(val);           //resolved
  throw new Error("man-made Error");
}).catch(function(err){
  console.log(err.message);   //man-made Error
});

错误会从最初的请求沿着回调函数，一直被传递下来。这一点和传统的错误冒泡类似，无论哪里有错误都可以被捕获到：

new Promise(function(resolve, reject){
  reject(new Error("original Error"));
}).then(function(val){
  console.log(val);           //不执行
  throw new Error("man-made Error");
}).catch(function(err){
  console.log(err.message);   //original Error
});

当然也可以在半路截住错误：

new Promise(function(resolve, reject){
  reject(new Error("original Error"));
}).then(function(val){
  console.log(val);           //不执行
  throw new Error("man-made Error");
}, function(err){
  console.log(`Uncaught Error: ${err.message}`);  //Uncaught Error: original Error
}).catch(function(err){
  console.log(err.message);   //不执行
});

这里需要注意以下几点：

reject 和 throw 一样可以抛出错误。
在 Promise 状态变为 resolved 或 rejected 之后抛出的错误会被忽略。
建议总是使用 catch() 方法，而不要在 then() 方法中定义 reject 函数。
如果一个 promise 既没有 catch方法，也没有可以捕获到错误的 then 方法，那么这个错误就消失了。它不会到 promise 外面来。
try...catch... 只能捕获同步代码的错误，不能捕获异步代码的错误(这个是 ES5 就有的)。
catch() 方法可以继续抛出错误，就像 try...catch 中的 catch 一样可以抛出错误。
这里需要说明的是第4条：错误不会到 Promise 外面是 ES6 规范的说法。具体理解(浏览器环境)：控制台依旧会报错，但是不影响 promise 语句之后续代码执行。此外，promise 语句内的异步语句(如事件，定时器等等)抛出的错误，不属于 promise 内部，发生错误会传播出去：

var p = new Promise(function(resolve, reject){
  resolve("ok");
  setTimeout(function(){throw new Error("setTimeout error")},0);
});
p.then(function(val){console.log(val);});     //ok
//Uncaught Error: setTimeout error

其次，就以上前两个注意事项举一例说明：

new Promise(function(resolve, reject){
  resolve("resolved");
  throw "original Error";     //被忽略
}).then(function(val){
  console.log(val);           //resolved
  throw (new Error("man-made Error"));
}).catch(function(err){
  console.log(err.message);   //man-made Error
});

catch 方法的返回值还是一个新的 promise 对象，可以继续调用 then 等其他方法:

new Promise(function(resolve, reject){
  reject(new Error("reject"));
}).catch(function(err){
  console.log("1st catch");   //被跳过
  return "continue";
}).then(function(val){
  console.log(val);           //continue
});

如果 catch之前没有错误，该 catch 会被跳过。这意味着，catch 不能捕获在其后面的语句中出现的错误：

new Promise(function(resolve, reject){
  resolve("resolved");
}).catch(function(err){
  console.log("1st catch");   //被跳过
}).then(function(val){
  console.log(val);           //resolved
  throw (new Error());
}).catch(function(err){
  console.log("2nd catch");   //2nd catch
});

finally() 方法

finally() 接受一个回调函数(无参数)为参数，和 try...catch...finally 中的 finally 类似，不论 promise 是什么状态，该回调函数都一定会运行。可以用它关闭文件，或者关闭服务器等:

server.listen(0).then(function(){
  //do sth.
}).finally(server.stop);

finally() 内部实现如下：

Promise.prototype.finally = function(callback){
  return this.then(
    value => {Promise.resolve(callback()).then(() => value)},
    error => {Promise.resolve(callback()).then(() => {throw error})}
  );
};

done() 方法

done() 方法用在 promise 处理语句的末端，用来处理可能未捕获的错误，并抛向全局。如果其带有参数，可以等效为 done() 之前多了一个 then():

p.done(fun1, fun2);
//相当于
p.then(fun1,fun2).done();

done() 内部实现如下：

Promise.prototype.done = function(onResolve, onRejected){
  this.then(onResolve, onRejected).catch(function(err){
    setTimeout(() => {throw err}, 0);
  });
};

Promise 静态方法

Promise.all()
将多个 promise 对象合并成一个新的 promise 实例。其接受一个装仅有 promise 对象的可遍历结构为参数，如果不是 promise 对象，系统会调用 Promise.resolve() 进行类型转换。
promise.all() 方法得到的新的 promise 对象状态由构成它的所有 promise 对象决定，具体分为2种情况:

当所有构成它的 promise 对象的状态都变成 resolved，这个新的对象状态才变为 resolved。此时构成它所有的 Promise 的返回值构成一个数组作为新的 promise 对象的回调函数参数；
当所有构成它的 promise 对象的状态有一个变成 rejected，这个新的对象状态就变为 rejected。此时第一个被 reject 的 Promise 的返回值作为新的 promise 对象的回调函数参数；

//伪代码, 由于没有正确的 url
var getJSON = function(url){
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.response = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler(){
      if(client.readyState !== 4) return;
      if(this.status === 200){
        resolve(client.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
  return promise;
}
var pros = ['url1', 'url2', 'url3'].map(url => getJSON(url));
Promise.all(pros).then(function(){
  console.log("all successful");
}, function(){
  console.log("one rejected");       //one rejected, 由于没有正确的 url
});

Promise.race()
将多个 promise 对象合并成一个新的 promise 实例。其接受一个装仅有 promise 对象的可遍历结构为参数，如果不是 promise 对象，系统会调用 Promise.resolve() 进行类型转换。
和 promise.all() 不同的是 Promise.race() 方法得到的新的 promise 对象状态由构成它的 promise 对象中最先改变状态的那一个决定。

//伪代码, 由于没有正确的 url
var getJSON = function(url){
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.response = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler(){
      if(client.readyState !== 4) return;
      if(this.status === 200){
        resolve(client.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
  return promise;
}
//如果5s不能获得数据就报错
var p = Promise.race([
  getJSON("url"),
  new Promise(function(resolve, reject){
    setTimeout(() => reject(new Error("Timeout")), 5000);
  })
]).then(res => console.log(res))
.catch(err => console.log(err));    //Error, 由于没有正确的 url

Promise.resolve()
将现有对象转化为 promise 对象：

var p = Promise.resolve($.ajax('url'));  //jQuery的 $.ajax 方法
//等同于：
var p = new Promise(function(resolve){
  resolve($.ajax('url'));
});

如果传入 Promise.resolve() 的对象不具有 then 方法(ie. unthenable), 则返回一个状态为 resolved 的新 promise 对象。

Promise.resolve("hello").then(function(val){
  console.log(val);                             //hello
});

如果你仅仅想得到一个 promise 对象，那利用 resolve() 方法是最简单的：

var promise = Promise.resolve();

Promise.reject()
Promise.reject(reason), 返回一个状态为 rejected 的 promise 实例。参数 reason 会被传递被实例的回调函数。

Promise.reject(new Error("error occured")).catch(err => console.log(err.message));  //error occured

应用举例

加载图片：

var preloadImage = function(url){
  return new Promise(function(resolve, reject){
    var image = new Image();
    image.onload = resolve;
    image.onerror = reject;
    image.src = url;
  });
};

使用 Generator 管理流程，用 promise 进行异步操作

function getFoo(){
  return new Promise(function(resolve){
    resolve("foo");
  });
}
function* gen(){
  try{
    var foo = yield getFoo();
    console.log(foo);
  } catch(e) {
    console.log(e);
  }
}

var it = gen();
(function go(result){
  if(result.done) return result.value;
  return result.value.then(function(value){
    return go(it.next(value));
  }, function(err){
    return go(it.throw(error));
  });
})(it.next());      //foo

异步中模拟 sleep 函数

const sleep = (time) => new Promise(function(resolve){
  setTimeout(resolve, time);
});
(async () => {
  for(var i = 0; i < 5; i++){
    await sleep(1000);
    console.log(new Date, i);
  }
  await sleep(1000);
  console.log(new Date, i);
})();

Promise,async,await笔记
Promise,async,await笔记 Promise 创建promise对象 Promise对象构造方法传入...
Promise then方法的链式调用
返回的是非promise对象优化：可能返回promise对象和非promise对象
ES6之promise(resolve与reject)
一、 Promise.resolve() 有时需要将现有对象转为 Promise 对象，Promise.resol...
ES6-Promise对象 (下)
ES6-Promise对象 (上) 1.Promise对象方法（1）Promise.all(iterable);...
Promise对象原理解析
Promise对象原理解析 ES6 原生提供了 Promise 对象。所谓 Promise，就是一个对象，用来传递...
ES6之promise(基本用法)
一、promise的含义 Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表...
Promise用法小结
Promise 的含义 Promise对象有以下两个特点：（1）对象的状态不受外界影响。Promise对象代表一...
关于Promises
一、名字 promise（首字母小写）：一个对象，Promise的实例对象 Promise（首字母...
Promise
Promise对象就是一个异步请求占位符对象把异步请求封装在Promise对象中，Promise的构造函数传入一...
Promise
Promise/A+ 英文中文实现Promise对象

Promise 对象

Promise 建立

Promise 对象方法

Promise 静态方法

应用举例

相关文章

Promise,async,await笔记

Promise then方法的链式调用

ES6之promise(resolve与reject)

ES6-Promise对象 (下)

Promise对象原理解析

ES6之promise(基本用法)

Promise用法小结

关于Promises

Promise

Promise

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端笔记