Rumah >hujung hadapan web >tutorial js >Fahami penggunaan Promise dalam kemahiran JavaScript_javascript
Javascript menggunakan fungsi panggil balik untuk mengendalikan pengaturcaraan tak segerak. Terdapat proses penyesuaian daripada pengaturcaraan segerak kepada pengaturcaraan panggil balik tak segerak, tetapi jika terdapat berbilang peringkat sarang panggil balik, yang sering kita panggil piramid panggilan balik azab (Pyramid of Doom), ia pastinya merupakan pengalaman pengaturcaraan yang buruk. Jadi terdapat spesifikasi Promises/A CommonJS untuk menyelesaikan masalah piramid panggil balik. Artikel ini mula-mula memperkenalkan spesifikasi berkaitan Promises, dan kemudian mendalami pemahaman dengan mentafsir Janji mini.
Apa itu Janji
Objek Promise mewakili nilai yang tidak tersedia pada masa ini, tetapi boleh diselesaikan pada satu ketika pada masa hadapan. Ia membolehkan anda menulis kod tak segerak dengan cara segerak. Contohnya, jika anda ingin menggunakan API Promise untuk membuat panggilan tak segerak ke pelayan jauh, anda perlu mencipta objek Promise yang mewakili data yang akan dikembalikan oleh perkhidmatan web pada masa hadapan. Satu-satunya masalah ialah data belum tersedia lagi. Data akan tersedia apabila permintaan selesai dan dikembalikan daripada pelayan. Pada masa ini, objek Promise akan bertindak sebagai proksi untuk data sebenar. Seterusnya, anda boleh mengikat fungsi panggil balik pada objek Promise, yang akan dipanggil sebaik sahaja data sebenar tersedia.
Objek janji telah wujud dalam banyak bahasa dalam pelbagai bentuk.
Alih keluar Piramid Azab
anti-corak yang paling biasa dalam Javascript ialah menyarangkan panggilan balik dalam panggilan balik.
// 回调金字塔 asyncOperation(function(data){ // 处理 `data` anotherAsync(function(data2){ // 处理 `data2` yetAnotherAsync(function(){ // 完成 }); }); });
Kod selepas memperkenalkan Janji
promiseSomething() .then(function(data){ // 处理 `data` return anotherAsync(); }) .then(function(data2){ // 处理 `data2` return yetAnotherAsync(); }) .then(function(){ // 完成 });
Janji mengubah panggilan balik bersarang kepada satu siri panggilan .kemudian berturut-turut, menghapuskan gaya kod buruk lapisan lekukan. Janji bukanlah algoritma untuk menyelesaikan masalah tertentu, tetapi model organisasi kod yang lebih baik. Semasa menerima model organisasi baharu, kami juga memahami secara beransur-ansur panggilan tak segerak daripada perspektif baharu.
Setiap platform bahasa mempunyai pelaksanaan Promise yang sepadan
Sekarang izinkan saya melihat beberapa butiran bagi setiap spesifikasi dalam persekitaran bahasa javascript.
Janji/Spesifikasi
janji mewakili nilai akhir yang dikembalikan apabila operasi selesai.
Promise mempunyai kaedah kemudian, yang boleh menerima 3 fungsi sebagai parameter. Dua fungsi pertama sepadan dengan fungsi panggil balik dua keadaan janji: dipenuhi dan ditolak. Fungsi ketiga mengendalikan maklumat kemajuan (sokongan untuk panggilan balik kemajuan adalah pilihan).
promiseSomething().then(function(fulfilled){ //当promise状态变成fulfilled时,调用此函数 },function(rejected){ //当promise状态变成rejected时,调用此函数 },function(progress){ //当返回进度信息时,调用此函数 });
如果 promise 支持如下连个附加方法,称之为可交互的 promise
获得当前 promise 最终值上的一个属性,返回值是一个新的 promise。
调用当然 promise 最终值上的一个方法,返回值也是一个新的promise。
Promises/B 规范
在 Promises/A 的基础上,Promises/B 定义了一组 promise 模块需要实现的 API
when(value, callback, errback_opt)
如果 value 不是一个 promise ,那么下一事件循环callback会被调用,value 作为 callback 的传入值。如果 value 是一个 promise,promise 的状态已经完成或者变成完成时,那么下一事件循环 callback 会被调用,resolve 的值会被传入 callback;promise 的状态已经失败或者变成失败时,那么下一事件循环 errback 会被调用,reason 会作为失败的理由传入 errback。
asap(value, callback, errback_opt)
与 when 最大的区别,如果 value 不是一个 promise,会被立即执行,不会等到下一事件循环。
enqueue(task Function)
尽可能快地在接下来的事件循环调用 task 方法。
get(object, name)
返回一个获得对象属性的 promise。
post(object, name, args)
返回一个调用对象方法的 promise。
put(object, name, value)
返回一个修改对象属性的 promise。
del(object, name)
返回一个删除对象属性的 promise。
makePromise(descriptor Object, fallback Function)
返回一个 promise 对象,该对象必须是一个可调用的函数,也可能是可被实例化的构造函数。
{ "when": function(errback){...}, "get": function(name){...}, "put": function(name, value){...}, "post": function(name, args){...}, "del": function(name){...}, }
上面每一个注册的 handle 都返回一个 resolved value或者 promise。
defer()
返回一个对象,该对象包含一个 resolve(value) 方法和一个 promise 属性。
当 resolve(value) 方法被第一次调用时,promise 属性的状态变成 完成,所有之前或之后观察该 promise 的 promise 的状态都被转变成 完成。value 参数如果不是一个 promise ,会被包装成一个 promise 的 ref。resolve 方法会忽略之后的所有调用。
reject(reason String)
返回一个被标记为 失败 的 promise。
一个失败的 promise 上被调用 when(message) 方法时,会采用如下两种方法之一
1. 如果存在 errback,errback 会以 reason 作为参数被调用。when方法会将 errback 的返回值返回。
2. 如果不存在 errback,when 方法返回一个新的 reject 状态的promise 对象,以同一 reason 作为参数。
ref(value)
如果 value 是 promise 对象,返回 value 本身。否则,返回一个resolved 的 promise,携带如下 handle。
1. when(errback),忽略 errback,返回 resolved 值
2. get(name),返回 resolved 值的对应属性。
3. put(name, value) ,设置 resolved 值的对应属性。
4. del(name),删除 resolved 值的对应属性。
5. post(name, args), 调用 resolved 值的对应方法。
6. 其他所有的调用都返回一个 reject,并携带 "Promise does not handle NAME" 的理由。
isPromise(value) Boolean
判断一个对象是否是 promise
method(name String)
获得一个返回 name 对应方法的 promise。返回值是 "get", "put", "del" 和 "post" 对应的方法,但是会在下一事件循环返回。
Promises/D 规范
为了增加不同 promise 实现之间的可互操作性,Promises/D 规范对promise 对象和 Promises/B 规范做了进一步的约定。以达到鸭子类型的效果(Duck-type Promise)。
简单来说Promises/D 规范,做了两件事情,
1、如何判断一个对象是 Promise 类型。
2、对 Promises/B 规范进行细节补充。
甄别一个 Promise 对象
Promise 对象必须是实现 promiseSend 方法。
1. 在 promise 库上下文中,如果对象包含 promiseSend 方法就可以甄别为promise 对象
2. promiseSend 方法必须接受一个操作名称,作为第一个参数
3. 操作名称是一个可扩展的集合,下面是一些保留名称
1. when,此时第三个参数必须是 rejection 回调。
1. rejection回调必须接受一个 rejection 原因(可以是任何值)作为第一个参数
2. get,此时第三个参数为属性名(字符串类型)
3. put,此时第三个参数为属性名(字符串类型),第四个参数为新属性值。
4. del,此时第三个参数为属性名
5. post,此时第三个参数为方法的属性名,接下来的变参为方法的调用参数
6. isDef
4. promiseSend方法的第二个参数为 resolver 方法
5. promiseSend方法可能接受变参
6. promiseSend方法必须返回undefined
对 Promises/B 规范的补充
Promises/D 规范中对 Promises/B 规范中定义的ref、reject、def、defer方法做了进一步细致的约束,此处略去这些细节。
Promises/A+ 规范
前面提到的 Promises/A/B/D 规范都是有CommonJS组织提出的,Promises/A+是有一个自称为Promises/A+ 组织发布的,该规范是以Promises/A作为基础进行补充和修订,旨在提高promise实现之间的可互操作性。
Promises/A+ 对.then方法进行细致的补充,定义了细致的Promise Resolution Procedure流程,并且将.then方法作为promise的对象甄别方法。
此外,Promises/A+ 还提供了兼容性测试工具,以确定各个实现的兼容性。
实现一个迷你版本的Promise
上面扯了这么多规范,现在我们看看如何实现一个简单而短小的Promise。
1、状态机
var PENDING = 0; var FULFILLED = 1; var REJECTED = 2; function Promise() { // store state which can be PENDING, FULFILLED or REJECTED var state = PENDING; // store value or error once FULFILLED or REJECTED var value = null; // store sucess & failure handlers attached by calling .then or .done var handlers = []; }
2、状态变迁
仅支持两种状态变迁,fulfill和reject
// ... function Promise() { // ... function fulfill(result) { state = FULFILLED; value = result; } function reject(error) { state = REJECTED; value = error; } }
fulfill和reject方法较为底层,通常更高级的resolve方法开放给外部。
// ... function Promise() { // ... function resolve(result) { try { var then = getThen(result); if (then) { doResolve(then.bind(result), resolve, reject) return } fulfill(result); } catch (e) { reject(e); } } }
resolve方法可以接受一个普通值或者另一个promise作为参数,如果接受一个promise作为参数,等待其完成。promise不允许被另一个promise fulfill,所以需要开放resolve方法。resolve方法依赖一些帮助方法定义如下:
/** * Check if a value is a Promise and, if it is, * return the `then` method of that promise. * * @param {Promise|Any} value * @return {Function|Null} */ function getThen(value) { var t = typeof value; if (value && (t === 'object' || t === 'function')) { var then = value.then; if (typeof then === 'function') { return then; } } return null; } /** * Take a potentially misbehaving resolver function and make sure * onFulfilled and onRejected are only called once. * * Makes no guarantees about asynchrony. * * @param {Function} fn A resolver function that may not be trusted * @param {Function} onFulfilled * @param {Function} onRejected */ function doResolve(fn, onFulfilled, onRejected) { var done = false; try { fn(function (value) { if (done) return done = true onFulfilled(value) }, function (reason) { if (done) return done = true onRejected(reason) }) } catch (ex) { if (done) return done = true onRejected(ex) } }
这里resolve和doResolve之间的递归很巧妙,用来处理promise的层层嵌套(promise的value是一个promise)。
构造器
// ... function Promise(fn) { // ... doResolve(fn, resolve, reject); }
.done方法
// ... function Promise(fn) { // ... function handle(handler) { if (state === PENDING) { handlers.push(handler); } else { if (state === FULFILLED && typeof handler.onFulfilled === 'function') { handler.onFulfilled(value); } if (state === REJECTED && typeof handler.onRejected === 'function') { handler.onRejected(value); } } } this.done = function (onFulfilled, onRejected) { // ensure we are always asynchronous setTimeout(function () { handle({ onFulfilled: onFulfilled, onRejected: onRejected }); }, 0); } // ... }
.then方法
// ... function Promise(fn) { // ... this.then = function (onFulfilled, onRejected) { var self = this; return new Promise(function (resolve, reject) { return self.done(function (result) { if (typeof onFulfilled === 'function') { try { return resolve(onFulfilled(result)); } catch (ex) { return reject(ex); } } else { return resolve(result); } }, function (error) { if (typeof onRejected === 'function') { try { return resolve(onRejected(error)); } catch (ex) { return reject(ex); } } else { return reject(error); } }); }); } // ... }
$.promise
jQuery 1.8 之前的版本,jQuery的 then 方法只是一种可以同时调用 done 、fail 和 progress 这三种回调的速写方法,而 Promises/A 规范的 then 在行为上更像是 jQuery 的 pipe。 jQuery 1.8 修正了这个问题,使 then 成为 pipe 的同义词。不过,由于向后兼容的问题,jQuery 的 Promise 再如何对 Promises/A 示好也不太会招人待见。
此外,在 Promises/A 规范中,由 then 方法生成的 Promise 对象是已执行还是已拒绝,取决于由 then 方法调用的那个回调是返回值还是抛出错误。在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意,因为错误不会被捕获。
小结
最后一个例子揭示了,实现 Promise 的关键是实现好 doResolve 方法,在完事以后触发回调。而为了保证异步 setTimeout(fun, 0); 是关键一步。
Promise 一直用得蛮顺手的,其很好的优化了 NodeJS 异步处理时的代码结构。但是对于其工作原理却有些懵懂和好奇,于是花了些精力查阅并翻译了Promise 的规范,以充分的理解 Promise 的细节。
以上就是关于JavaScript中Promise的使用方法介绍,希望对大家的学习有所帮助。