摘要:不是一種狀態(tài),而是一種語法上的便利。方法方法返回一個以給定值掉的對象。它的作用是為實例添加狀態(tài)改變時的回調(diào)函數(shù)。
Promise定義
Promise實現(xiàn) 狀態(tài)機A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise"s eventual value or the reason why the promise cannot be fulfilled.Promises/A+
Promise實際是一個狀態(tài)機,從后面需要用到的狀態(tài)開始實現(xiàn)Promise.
var PENDING = 0; var FULFILLED = 1; var REJECTED = 2; function Promise() { //存儲三種狀態(tài):PENDING, FULFILLED, REJECTED.初始狀態(tài)是PENDING var state = PENDING; //存儲結(jié)果或者錯誤,一旦FULFILLED 或者 REJECTED var value = null; //存儲sucess和failure處理函數(shù),綁定在.then和.done var handlers = []; }
下一步,添加兩種過渡狀態(tài)fulfilling和rejecting:
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 once FULFILLED or REJECTED var value = null; // store sucess & failure handlers var handlers = []; function fulfill(result) { state = FULFILLED; value = result; } function reject(error) { state = REJECTED; value = error; } }
上面是兩種初級過渡,下面是更高級的過渡,叫做resolve:
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 once FULFILLED or REJECTED var value = null; // store sucess & failure handlers var handlers = []; function fulfill(result) { state = FULFILLED; value = result; } function reject(error) { state = REJECTED; value = error; } function resolve(result) { try { var then = getThen(result); if (then) { doResolve(then.bind(result), resolve, reject) return } fulfill(result); } catch (e) { reject(e); } } } /** * 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) } }
以上代碼的簡單實現(xiàn)看參考:https://github.com/then/promise/blob/master/src/core.js
Promise狀態(tài)Promise對象有以下幾種狀態(tài):
pending: 初始狀態(tài), 非 fulfilled 或 rejected.
fulfilled: 成功的操作.(如果promise.then(f),立刻調(diào)用f)
rejected: 失敗的操作.(如果promise.then(undefined, r),立刻調(diào)用r)
如果一個promise對象處在fulfilled或rejected狀態(tài)而不是pending狀態(tài),那么它也可以被稱為settled狀態(tài)。你可能也會聽到一個術(shù)語resolved,它表示promise對象處于settled狀態(tài),或者promise對象被鎖定在了調(diào)用鏈中。settled不是一種狀態(tài),而是一種語法上的便利。
Promise方法 Promise.resolve(value/promise/thenable)Promise.resolve(value)方法返回一個以給定值resolve掉的Promise對象。但如果這個值是thenable的(就是說帶有then方法),返回的promise會“追隨”這個thenable的對象,接收它的最終狀態(tài)(指resolved/rejected/pendding/settled);否則這個被返回的promise對象會以這個值被fulfilled。
//Example var p = Promise.resolve([1,2,3]); p.then(function(v) { console.log(v[0]); // 1 });
//Polyfill Promise.resolve = function (value) { return new Promise(function (resolve) { resolve(value); }); };Promise.reject(reason)
Promise.reject(reason)方法返回一個用reason拒絕的Promise.
//Example Promise.reject(new Error("fail")).then(function(error) { // 未被調(diào)用 }, function(error) { console.log(error); // 堆棧跟蹤 });
//Polyfill Promise.reject = function (value) { return new Promise(function (resolve, reject) { reject(value); }); };Promise.race(iterable)
Promise.race(iterable)方法返回一個promise,這個promise在iterable中的任意一個promise被解決或拒絕后,立刻以相同的解決值被解決或以相同的拒絕原因被拒絕。
//Example var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "一"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "二"); }); Promise.race([p1, p2]).then(function(value) { console.log(value); // "二" // 兩個都解決,但p2更快 });
//Polyfill Promise.race = function (values) { // TODO: this polyfill only supports array-likes // it should support all iterables return new Promise(function (resolve, reject) { values.forEach(function(value){ Promise.resolve(value).then(resolve, reject); }); }); };Promise.all(iterable)
Promise.all(iterable) 方法返回一個promise,該promise會在iterable參數(shù)內(nèi)的所有promise都被解決后被解決。
//Example var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 1000, "one"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 2000, "two"); }); var p3 = new Promise(function(resolve, reject) { setTimeout(resolve, 3000, "three"); }); var p4 = new Promise(function(resolve, reject) { setTimeout(resolve, 4000, "four"); }); var p5 = new Promise(function(resolve, reject) { reject("reject"); }); Promise.all([p1, p2, p3, p4, p5]).then(function(value) { console.log(value); }, function(reason) { console.log(reason) //"reject" });
//Polyfill Promise.all = function (arr) { // TODO: this polyfill only supports array-likes // it should support all iterables var args = Array.prototype.slice.call(arr); return new Promise(function (resolve, reject) { if (args.length === 0) return resolve([]); var remaining = args.length; function res(i, val) { if (val && (typeof val === "object" || typeof val === "function")) { var then = val.then; if (typeof then === "function") { var p = new Promise(then.bind(val)); p.then(function (val) { res(i, val); }, reject); return; } } args[i] = val; if (--remaining === 0) { resolve(args); } } for (var i = 0; i < args.length; i++) { res(i, args[i]); } }); };Promise.prototype.then(onFulfilled, onRejected)
Promise實例具有then方法,也就是說,then方法是定義在原型對象Promise.prototype上的。它的作用是為Promise實例添加狀態(tài)改變時的回調(diào)函數(shù)。
//Example var p1 = new Promise(function(resolve, reject) { resolve("Success!"); // or // reject ("Error!"); }); p1.then(function(value) { console.log(value); // Success! }, function(reason) { console.log(reason); // Error! });Promise.prototype.catch(onRejected)
等同于調(diào)用Promise.prototype.then(undefined, onRejected)
//Example var p1 = new Promise(function(resolve, reject) { resolve("Success"); }); p1.then(function(value) { console.log(value); // "Success!" throw "oh, no!"; }).catch(function(e) { console.log(e); // "oh, no!" });
//Polyfill Promise.prototype["catch"] = function (onRejected) { return this.then(null, onRejected); };參考資源
MDN Promise
Promise官方文檔
Promise對象
then/promise
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/78315.html
摘要:的幾個擴展總結(jié)描述和相反,當所有的被拒絕之后,方法執(zhí)行完成的決議,如果存在一個執(zhí)行完成的決議,方法則執(zhí)行拒絕里邊的所有實例反過來就好了執(zhí)行到此執(zhí)行到此描述忽略被拒絕的,只需要有一個完成的,方法就執(zhí)行完成操作,如果全部的都被拒絕,方法執(zhí)行拒絕 Promise的幾個擴展API總結(jié) 1. Promise.none 描述: 和 Promise.all 相反,當所有的promise被拒絕之后,n...
摘要:構(gòu)造函數(shù)的實現(xiàn)我們在使用的時候其實是使用關(guān)鍵字創(chuàng)建了一個的實例,其實是一個類,即構(gòu)造函數(shù),下面來實現(xiàn)構(gòu)造函數(shù)。 showImg(https://segmentfault.com/img/remote/1460000018998456); 閱讀原文 概述 Promise 是 js 異步編程的一種解決方案,避免了 回調(diào)地獄 給編程帶來的麻煩,在 ES6 中成為了標準,這篇文章重點不是敘...
摘要:使用對象的好處在于可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調(diào)函數(shù)。對象異步操作拋出錯誤,狀態(tài)就會變?yōu)?,就會調(diào)用方法指定的回調(diào)函數(shù)處理這個錯誤。 Promise 含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn),ES6 將其寫進了語言標準,統(tǒng)一了用法,原生提供了 Promise 對象。 所謂 P...
摘要:對于的來說基元函數(shù)包括組合函數(shù)的類型簽名返回情況完成如果傳入的可迭代對象為空,會同步地返回一個已完成狀態(tài)的。相反,如果是在指定的時間之后完成,剛返回結(jié)果就是一個拒絕狀態(tài)的從而觸發(fā)方法指定的回調(diào)函數(shù)。在行中,對每個小任務(wù)得到的結(jié)果進行匯總。 為了保證的可讀性,本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 從ES6 開始,我們大都使用的是 P...
摘要:使用是極好的,它是如此有用以至于我覺得應(yīng)該好好研究一下,甚至是實現(xiàn)一個簡易的版本。構(gòu)造函數(shù)檢查參數(shù)例如是不是函數(shù)啊初始化,創(chuàng)建對象執(zhí)行因此構(gòu)造函數(shù)里面?zhèn)魅氲氖橇⒓幢粓?zhí)行的。 使用Promise是極好的,它是如此有用以至于我覺得應(yīng)該好好研究一下Promise,甚至是實現(xiàn)一個簡易的版本。實現(xiàn)之前,我們先來看看Promise的用途: 使用Promise callback hell Promi...
摘要:寫在前面這一章的順序?qū)τ谖唇佑|過使用過的童鞋而言略抽象了,前邊幾章主要為了說明和之前的異步方式相比有什么優(yōu)勢和它能解決什么問題,后邊才詳解的設(shè)計和各種場景下如何使用。建議先了解和簡單使用過后再閱讀,效果更佳。 寫在前面:Promise這一章的順序?qū)τ谖唇佑|過使用過Promise的童鞋而言略抽象了,前邊幾章主要為了說明Promise和之前的異步方式相比有什么優(yōu)勢和它能解決什么問題,后邊才...
閱讀 2745·2021-11-11 16:55
閱讀 777·2021-09-04 16:40
閱讀 3162·2019-08-30 15:54
閱讀 2730·2019-08-30 15:54
閱讀 2507·2019-08-30 15:46
閱讀 490·2019-08-30 15:43
閱讀 3306·2019-08-30 11:11
閱讀 3060·2019-08-28 18:17