Promise
我们都知道 JavaScript 是单线程执行的, 执行的顺序是按照任务队列来执行的.
什么是任务队列?
任务队列是 JS 执行的顺序, 分为同步任务和异步任务, 异步任务分为宏任务和微任务. 微任务只有 promise. 代码块总是先执行同步任务, 再执行异步任务. 当运行完异步任务, 则程序运行完成.
1571991732753.PNG
如下面的代码:
- console.log('before');// 同步
- setTimeout(() => {// 异步
- console.log('Done');
- }, 0);
- let promise = new Promise(function(resolve, reject) { // 同步
- console.log('promise');
- setTimeout(()=> resolve(),0);// 异步
- });
- promise.then(function() {
- console.log('resolved.');// 异步
- })
- console.log('after');// 同步
运行后结果如图
1.PNG
可见, 异步任务在未来的某一个时间内执行, 对于异步任务, 执行时间跟网络环境, 硬件环境相关, 没有办法确定准确的执行时间. 如下面的 Ajax 请求执行代码,
- request.onreadystatechange = function () {
- if (request.readyState === 4) {
- if (request.status === 200) {
- return success(request.responseText);
- } else {
- return fail(request.status);
- }
- }
- }
在请求的状态改变后根据状态来渲染不同的回调函数, 但是这样写, 代码的复用性很差, 且没有将执行函数与回调函数分开, 所以就产生了 promise.
promise 主要解决的问题:
回调函数和异步事件
promise 的定义
promise 像一种容器, 里面存着被执行的函数的运行状态. 有三种状态: 有三种状态: pending(进行中),fulfilled(已成功) 和 rejected(已失败)
定义 promise 的方法如下:
const firstPromise = new Promise(function(resolve, reject) { if (success){ resolve(value); } else { reject(error); }});
上述代码中, 首先通过 new Promise 构造了 promise 对象. 在 promise 中放入了匿名函数, 并传递了两个参数, resolve, reject(都为函数),resolve 函数为函数执行成功后的回调函数, reject 为函数执行失败后的回调函数.
resolve, reject 都为规范, 函数名不可更改. 且由 JS 引擎提供, 不用自己部署.
resolve 函数的作用: 将 Promise 对象的状态从 "未完成" 变为 "成功". 将异步操作的结果作为参数传递出去.
reject 函数的作用: 将 Promise 对象的状态从 "未完成" 变为 "失败". 将异步操作的结果作为参数传递出去.
promise 的特点:
(1)promise 的状态不受外界影响. 只有异步操作的结果, 可以决定当前是哪一种状态, 任何其他操作都无法改变这个状态.
(2) 一旦状态改变, 就不会再变, 有两种可能: 从 pending 变为 fulfilled 和从 pending 变为 rejected. 只要这两种情况发生, 不会再变了, 会一直保持这个结果.
promise 生成后, 可以进行后续的状态操作. 通常有两种方法 .then/.catch / 方法. 其中. then 方法在状态为
resolve 后执行,.catch 在函数在状态为 reject 后执行, 且. then/.catch / 方法执行后并不会结束函数的运行. 如下图:
捕获. PNG
示例代码:
let promise = new Promise(function(resolve, reject) { let a=1; if (a===1) { resolve(); // 异步 console.log('promise'); }else{ reject(); }});promise.then(function() { console.log('resolved." );}).catch(function(){ console.log('reject.');});// 结果为输出 // promise (resolve 方法不会结束函数运行, 且为异步方法)// resolved
来源: http://www.jianshu.com/p/5d43c7df0110