学科专业网站建设,powershell做网站,报喜鸟集团有限公司网页制作,网站后台上传的照片模糊1.什么是Promise? Promise是JS异步编程中的重要概念#xff0c;异步抽象处理对象#xff0c;是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数事件监听发布/订阅Promise对象这里就拿回调函数说说 1.对于回调函数 我们用Jquery的ajax获取数…1.什么是Promise? Promise是JS异步编程中的重要概念异步抽象处理对象是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数事件监听发布/订阅Promise对象这里就拿回调函数说说 1.对于回调函数 我们用Jquery的ajax获取数据时 都是以回调函数方式获取的数据 $.get(url, (data) {console.log(data)
)
复制代码2.如果说 当我们需要发送多个异步请求 并且每个请求之间需要相互依赖 那这时 我们只能 以嵌套方式来解决 形成 回调地狱 $.get(url, data1 {console.log(data1)$.get(data1.url, data2 {console.log(data1)})
})
复制代码 这样一来在处理越多的异步逻辑时就需要越深的回调嵌套这种编码模式的问题主要有以下几个 代码逻辑书写顺序与执行顺序不一致不利于阅读与维护。异步操作的顺序变更时需要大规模的代码重构。回调函数基本都是匿名函数bug 追踪困难。回调函数是被第三方库代码如上例中的 ajax 而非自己的业务代码所调用的造成了 IoC 控制反转。Promise 处理多个相互关联的异步请求 1.而我们Promise 可以更直观的方式 来解决 回调地狱 const request url { return new Promise((resolve, reject) {$.get(url, data {resolve(data)});})
};// 请求data1
request(url).then(data1 {return request(data1.url);
}).then(data2 {return request(data2.url);
}).then(data3 {console.log(data3);
}).catch(err throw new Error(err));
复制代码2.相信大家在 vue/react 都是用axios fetch 请求数据 也都支持 Promise API import axios from axios;
axios.get(url).then(data {console.log(data)
})
复制代码 Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。 3.Promise使用 1.Promise 是一个构造函数 new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject const promise new Promise((resolve, reject) {// 异步处理// 处理结束后、调用resolve 或 reject
});复制代码2.promise相当于一个状态机 promise的三种状态 pendingfulfilledrejected1.promise 对象初始化状态为 pending 2.当调用resolve(成功)会由pending fulfilled 3.当调用reject(失败)会由pending rejected 注意promsie状态 只能由 pending fulfilled/rejected, 一旦修改就不能再变 3.promise对象方法 1.then方法注册 当resolve(成功)/reject(失败)的回调函数 // onFulfilled 是用来接收promise成功的值
// onRejected 是用来接收promise失败的原因
promise.then(onFulfilled, onRejected);
复制代码 then方法是异步执行的 2.resolve(成功) onFulfilled会被调用 const promise new Promise((resolve, reject) {resolve(fulfilled); // 状态由 pending fulfilled
});
promise.then(result { // onFulfilledconsole.log(result); // fulfilled
}, reason { // onRejected 不会被调用})
复制代码3.reject(失败) onRejected会被调用 const promise new Promise((resolve, reject) {reject(rejected); // 状态由 pending rejected
});
promise.then(result { // onFulfilled 不会被调用}, reason { // onRejected console.log(reason); // rejected
})
复制代码4.promise.catch 在链式写法中可以捕获前面then中发送的异常, promise.catch(onRejected)
相当于
promise.then(null, onRrejected);// 注意
// onRejected 不能捕获当前onFulfilled中的异常
promise.then(onFulfilled, onRrejected); // 可以写成
promise.then(onFulfilled).catch(onRrejected);
复制代码4.promise chain promise.then方法每次调用 都返回一个新的promise对象 所以可以链式写法 function taskA() {console.log(Task A);
}
function taskB() {console.log(Task B);
}
function onRejected(error) {console.log(Catch Error: A or B, error);
}var promise Promise.resolve();
promise.then(taskA).then(taskB).catch(onRejected) // 捕获前面then方法中的异常
复制代码5.Promise的静态方法 1.Promise.resolve 返回一个fulfilled状态的promise对象 Promise.resolve(hello).then(function(value){console.log(value);
});Promise.resolve(hello);
// 相当于
const promise new Promise(resolve {resolve(hello);
});
复制代码2.Promise.reject 返回一个rejected状态的promise对象 Promise.reject(24);
new Promise((resolve, reject) {reject(24);
});
复制代码3.Promise.all 接收一个promise对象数组为参数 只有全部为resolve才会调用 通常会用来处理 多个并行异步操作 const p1 new Promise((resolve, reject) {resolve(1);
});const p2 new Promise((resolve, reject) {resolve(2);
});const p3 new Promise((resolve, reject) {reject(3);
});Promise.all([p1, p2, p3]).then(data { console.log(data); // [1, 2, 3] 结果顺序和promise实例数组顺序是一致的
}, err {console.log(err);
});
复制代码4.Promise.race 接收一个promise对象数组为参数 Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话就会继续进行后面的处理。 function timerPromisefy(delay) {return new Promise(function (resolve, reject) {setTimeout(function () {resolve(delay);}, delay);});
}
var startDate Date.now();Promise.race([timerPromisefy(10),timerPromisefy(20),timerPromisefy(30)
]).then(function (values) {console.log(values); // 10
});
复制代码5.Promise的finally Promise.prototype.finally function (callback) {let P this.constructor;return this.then(value P.resolve(callback()).then(() value),reason P.resolve(callback()).then(() { throw reason }));
};
复制代码4. Promise 代码实现 /*** Promise 实现 遵循promise/A规范* Promise/A规范译文:* https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4*/// promise 三个状态
const PENDING pending;
const FULFILLED fulfilled;
const REJECTED rejected;function Promise(excutor) {let that this; // 缓存当前promise实例对象that.status PENDING; // 初始状态that.value undefined; // fulfilled状态时 返回的信息that.reason undefined; // rejected状态时 拒绝的原因that.onFulfilledCallbacks []; // 存储fulfilled状态对应的onFulfilled函数that.onRejectedCallbacks []; // 存储rejected状态对应的onRejected函数function resolve(value) { // value成功态时接收的终值if(value instanceof Promise) {return value.then(resolve, reject);}// 为什么resolve 加setTimeout?// 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.// 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。setTimeout(() {// 调用resolve 回调对应onFulfilled函数if (that.status PENDING) {// 只能由pending状态 fulfilled状态 (避免调用多次resolve reject)that.status FULFILLED;that.value value;that.onFulfilledCallbacks.forEach(cb cb(that.value));}});}function reject(reason) { // reason失败态时接收的拒因setTimeout(() {// 调用reject 回调对应onRejected函数if (that.status PENDING) {// 只能由pending状态 rejected状态 (避免调用多次resolve reject)that.status REJECTED;that.reason reason;that.onRejectedCallbacks.forEach(cb cb(that.reason));}});}// 捕获在excutor执行器中抛出的异常// new Promise((resolve, reject) {// throw new Error(error in excutor)// })try {excutor(resolve, reject);} catch (e) {reject(e);}
}/*** resolve中的值几种情况* 1.普通值* 2.promise对象* 3.thenable对象/函数*//*** 对resolve 进行改造增强 针对resolve中不同值情况 进行处理* param {promise} promise2 promise1.then方法返回的新的promise对象* param {[type]} x promise1中onFulfilled的返回值* param {[type]} resolve promise2的resolve方法* param {[type]} reject promise2的reject方法*/
function resolvePromise(promise2, x, resolve, reject) {if (promise2 x) { // 如果从onFulfilled中返回的x 就是promise2 就会导致循环引用报错return reject(new TypeError(循环引用));}let called false; // 避免多次调用// 如果x是一个promise对象 该判断和下面 判断是不是thenable对象重复 所以可有可无if (x instanceof Promise) { // 获得它的终值 继续resolveif (x.status PENDING) { // 如果为等待态需等待直至 x 被执行或拒绝 并解析y值x.then(y {resolvePromise(promise2, y, resolve, reject);}, reason {reject(reason);});} else { // 如果 x 已经处于执行态/拒绝态(值已经被解析为普通值)用相同的值执行传递下去 promisex.then(resolve, reject);}// 如果 x 为对象或者函数} else if (x ! null ((typeof x object) || (typeof x function))) {try { // 是否是thenable对象具有then方法的对象/函数let then x.then;if (typeof then function) {then.call(x, y {if(called) return;called true;resolvePromise(promise2, y, resolve, reject);}, reason {if(called) return;called true;reject(reason);})} else { // 说明是一个普通对象/函数resolve(x);}} catch(e) {if(called) return;called true;reject(e);}} else {resolve(x);}
}/*** [注册fulfilled状态/rejected状态对应的回调函数]* param {function} onFulfilled fulfilled状态时 执行的函数* param {function} onRejected rejected状态时 执行的函数* return {function} newPromsie 返回一个新的promise对象*/
Promise.prototype.then function(onFulfilled, onRejected) {const that this;let newPromise;// 处理参数默认值 保证参数后续能够继续执行onFulfilled typeof onFulfilled function ? onFulfilled : value value;onRejected typeof onRejected function ? onRejected : reason {throw reason;};// then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?// 原因:// 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout// 其二 2.2.6规范 对于一个promise它的then方法可以调用多次.当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected// 其二 2.2.6规范 也是resolve函数里加setTimeout的原因// 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行// 如下面这种情景 多次调用p1.then// p1.then((value) { // 此时p1.status 由pedding状态 fulfilled状态// console.log(value); // resolve// // console.log(p1.status); // fulfilled// p1.then(value { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行// console.log(value); // resolve// });// console.log(当前执行栈中同步代码);// })// console.log(全局执行栈中同步代码);//if (that.status FULFILLED) { // 成功态return newPromise new Promise((resolve, reject) {setTimeout(() {try{let x onFulfilled(that.value);resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值} catch(e) {reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);}});})}if (that.status REJECTED) { // 失败态return newPromise new Promise((resolve, reject) {setTimeout(() {try {let x onRejected(that.reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}if (that.status PENDING) { // 等待态// 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中return newPromise new Promise((resolve, reject) {that.onFulfilledCallbacks.push((value) {try {let x onFulfilled(value);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});that.onRejectedCallbacks.push((reason) {try {let x onRejected(reason);resolvePromise(newPromise, x, resolve, reject);} catch(e) {reject(e);}});});}
};/*** Promise.all Promise进行并行处理* 参数: promise对象组成的数组作为参数* 返回值: 返回一个Promise实例* 当这个数组里的所有promise对象全部变为resolve状态的时候才会resolve。*/
Promise.all function(promises) {return new Promise((resolve, reject) {let done gen(promises.length, resolve);promises.forEach((promise, index) {promise.then((value) {done(index, value)}, reject)})})
}function gen(length, resolve) {let count 0;let values [];return function(i, value) {values[i] value;if (count length) {console.log(values);resolve(values);}}
}/*** Promise.race* 参数: 接收 promise对象组成的数组作为参数* 返回值: 返回一个Promise实例* 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话就会继续进行后面的处理(取决于哪一个更快)*/
Promise.race function(promises) {return new Promise((resolve, reject) {promises.forEach((promise, index) {promise.then(resolve, reject);});});
}// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
Promise.prototype.catch function(onRejected) {return this.then(null, onRejected);
}Promise.resolve function (value) {return new Promise(resolve {resolve(value);});
}Promise.reject function (reason) {return new Promise((resolve, reject) {reject(reason);});
}/*** 基于Promise实现Deferred的* Deferred和Promise的关系* - Deferred 拥有 Promise* - Deferred 具备对 Promise的状态进行操作的特权方法resolve reject**参考jQuery.Deferred*url: http://api.jquery.com/category/deferred-object/*/
Promise.deferred function() { // 延迟对象let defer {};defer.promise new Promise((resolve, reject) {defer.resolve resolve;defer.reject reject;});return defer;
}/*** Promise/A规范测试* npm i -g promises-aplus-tests* promises-aplus-tests Promise.js*/try {module.exports Promise
} catch (e) {
}复制代码Promise测试 npm i -g promises-aplus-tests
promises-aplus-tests Promise.js
复制代码如何主动终止Promise调用链 const p1 new Promise((resolve, reject) {setTimeout(() { // 异步操作resolve(start)}, 1000);
});p1.then((result) {console.log(a, result); return Promise.reject(中断后续调用); // 此时rejected的状态将直接跳到catch里剩下的调用不会再继续
}).then(result {console.log(b, result);
}).then(result {console.log(c, result);
}).catch(err {console.log(err);
});// a start
// 中断后续调用
复制代码相关知识参考资料 ES6-promisePromises/A规范-英文Promises/A规范-翻译1Promises/A规范-翻译-推荐JS执行栈Javascript异步编程的4种方法
