摘要:一旦非同步操作完成,就調(diào)用指定的回調(diào)函數(shù),并總是返回一個(gè)對(duì)象,方便鏈?zhǔn)秸{(diào)用。方法接受兩個(gè)回調(diào)函數(shù)作為參數(shù),第一個(gè)參數(shù)是成功時(shí)的回調(diào),第二個(gè)是失敗時(shí)的回調(diào)。方法,方法是定義在原型對(duì)象上的,作用是為對(duì)象添加回調(diào)函數(shù)。
先上一個(gè)大家比較熟悉的例子;
以前我們寫jquery ajax請(qǐng)求的時(shí)候,都是這樣寫:
$.ajax({ url: "test.json", success: function(){ alert("hello world!"); }, error:function(){ alert("error"); } });
后來(lái)呢在jquery1.7版本后,我們開(kāi)始這樣寫:
$.ajax("test.json") .done(function(){ alert("hello world!"); }) .fail(function(){ alert("error"); });
很明顯,更改后的代碼更易懂易讀了。
這個(gè)是jquery的deferred對(duì)象,jquery deferred對(duì)象就是jQuery對(duì)Promises的實(shí)現(xiàn),還其他有很多實(shí)現(xiàn)了promises的庫(kù)供開(kāi)發(fā)者可用。 像微軟的 WinJS.Promise, when.js, q, 和dojo.Deferred,它們暴露的都是deferred對(duì)象。Promise也已經(jīng)納入了ES6,對(duì)于jQuery實(shí)現(xiàn)Promises我們暫時(shí)就不講了,今天的目的是Promise。
其實(shí)呢,Promise就是一個(gè)對(duì)象,它是用來(lái)實(shí)現(xiàn)異步操作的,它可以讓異步代碼書(shū)寫起來(lái)更優(yōu)雅,更便于閱讀。
Promise的特性:
1、Promise對(duì)象有三種狀態(tài):Pending(進(jìn)行中)、Resolved(已完成,又稱 Fulfilled)和 Rejected(已失?。?,只有異步操作結(jié)果可以改變當(dāng)前狀態(tài),其他操作不能改變狀態(tài),Promise對(duì)象的狀態(tài)只能從“進(jìn)行中”改為“已完成”或者從“進(jìn)行中”改為“失敗”。
2、Promise對(duì)象的then方法,就是用來(lái)指定回調(diào)函數(shù)。一旦非同步操作完成,就調(diào)用指定的回調(diào)函數(shù),并總是返回一個(gè)promise對(duì)象,方便鏈?zhǔn)秸{(diào)用。而且同一個(gè)promise的then可以調(diào)用多次。
3、then方法接受兩個(gè)回調(diào)函數(shù)作為參數(shù),第一個(gè)參數(shù)是成功Resolved時(shí)的回調(diào),第二個(gè)是失敗Reject時(shí)的回調(diào)。第二個(gè)參數(shù)是可以選的,同時(shí),then可以接受另一個(gè)promise傳入,也接受一個(gè)“類then”的對(duì)象或方法,即thenable對(duì)象。
我們現(xiàn)在用promise來(lái)組織一下代碼。
var sleep = function (time) { return new Promise(function (resolve, reject) { console.log("test123"); setTimeout(function () { resolve("test"); }, time); }) }; (function(){ console.log("start"); sleep(3000) .then(function(data){ console.log(data); return sleep(5000);}) .then(function(data){ console.log(data); console.log("end"); }) })();
上面代碼中,sleep方法返回一個(gè)Promise實(shí)例,表示一段時(shí)間以后才會(huì)發(fā)生的結(jié)果。首先輸出‘start’,然后,sleep執(zhí)行后,3秒后返回“test”,觸發(fā)then方法綁定的回調(diào)函數(shù),輸出回調(diào)返回值“test”,又return sleep(5000),這樣第一個(gè)then的返回值,就是第二個(gè)的參數(shù),再次執(zhí)行sleep,5秒后返回‘test’,輸出‘test’、"end";
好像沒(méi)有什么大不了的,promises的真正強(qiáng)大之處在于多重的鏈接,在異步執(zhí)行的流程中,把執(zhí)行代碼和處理結(jié)果的代碼清晰地分離了:它有個(gè)缺點(diǎn)就是鏈過(guò)長(zhǎng)以后,滿屏幕的then,傻傻分不清業(yè)務(wù)到底干啥了,
Promise的 api1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成,相當(dāng)于 且
6、Promise.race() // 完成一個(gè)即可,相當(dāng)于 或
1、Promise.resolve()的作用將現(xiàn)有對(duì)象轉(zhuǎn)為Promise對(duì)象resolvedl;
Promise.resolve("test")==new Promise(resolve=>resolve("test"))
2、Promise.reject()也是返回一個(gè)Promise對(duì)象,狀態(tài)為rejected;
let p=Promise.reject("error") == let p=new Promise((resolve,reject)=>reject("error")); p.catch(data=>{ console.log(data); })
生成一個(gè)Promise對(duì)象的實(shí)例對(duì)象p,拋出錯(cuò)誤,狀態(tài)就會(huì)變?yōu)镽ejected,調(diào)用p.catch()指定的回調(diào)函數(shù)。
3、.then()方法,then方法是定義在原型對(duì)象Promise.prototype上的,作用是為Promise 對(duì)象添加回調(diào)函數(shù)。
let p=new Promise(resolve=>resolve("hello")); p.then((resolve,reject)=>{ console.log(resolve); }).then(function(){ console.log("zhangsan"); })
then方法的第一個(gè)參數(shù)是Resolved狀態(tài)的回調(diào)函數(shù),第二個(gè)參數(shù)(可選)是Rejected狀態(tài)的回調(diào)函數(shù)。 可以使用鏈?zhǔn)讲僮鳎付ǘ鄠€(gè)then(),依次執(zhí)行,上面的代碼輸出結(jié)果:’hello‘,"zhangsan"
4、.catch():發(fā)生錯(cuò)誤的回調(diào)函數(shù),同樣,catch方法也是定義在原型對(duì)象Promise.prototype上的,事例同Promise.reject()的例子。注:如果Promise的狀態(tài)已經(jīng)變?yōu)閞esolved,再拋出錯(cuò)誤是無(wú)效的。
var p = new Promise(function(resolve, reject) { resolve("success"); reject("fail"); }); p.then(function(value) { console.log(value) }) .catch(function(error) { console.log(error) });
輸出結(jié)果:success;
5、Promise.all()的作用是同時(shí)執(zhí)行多個(gè)實(shí)例,同步并行,且所以的實(shí)例都返回resolve狀態(tài),Promise才會(huì)改變?yōu)閞esolve狀態(tài),其中一個(gè)為rejected,promise的狀態(tài)就是rejected;
注:Promise.all 方法的參數(shù)可以不是數(shù)組,但是必須是一個(gè)Iterator接口對(duì)象,且返回promise實(shí)例,否則報(bào)錯(cuò):error:TypeError: [object Promise] is not iterable!
let p1 =new Promise(function(resolve,reject){ resolve(1); }); let p2 = new Promise(function(resolve,reject){ resolve(2); }); let p3 = new Promise(function(resolve,reject){ // reject(); resolve(3); }); Promise.all([p1, p2, p3]).then(function (results) { console.log("success:"+results); }).catch(function(r){ console.log("error"); console.log(r); });
上面代碼輸出:success:1,2,3;
把 p3方法改為返回 reject();輸出結(jié)果是:error;
6、Promise.race()的作用也是同時(shí)執(zhí)行多個(gè)實(shí)例,只要有一個(gè)實(shí)例改變狀態(tài),Promise就改為那個(gè)實(shí)例所改變的狀態(tài);
let p1 =new Promise(function(resolve,reject){ setTimeout(function(){ reject(1); },3000) }); let p2 = new Promise(function(resolve,reject){ setTimeout(function(){ resolve(2); },1000) }); Promise.race([p1, p2]).then(function (results) { console.log("success:"+results); }).catch(function(results){ console.log("error:"+results); }); 輸出:success: 2;
上面代碼p2首先執(zhí)行完畢,改變狀態(tài)為resolve,所以promise的狀態(tài)被改為resolve;
我們把p1的時(shí)間改為1000,p2改為3000,也就是說(shuō)p1先執(zhí)行完畢,promise的狀態(tài)也被改變?yōu)閞eject,輸出:error:1
如果想深入學(xué)習(xí),可以看一下阮一峰的《ES 6標(biāo)準(zhǔn)入門》的Promise部分http://es6.ruanyifeng.com/#do...,很詳細(xì)的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/81790.html
摘要:三是控制反轉(zhuǎn)控制權(quán)在其他人的代碼上,假如異步函數(shù)是別人提供的庫(kù),我們把回調(diào)函數(shù)傳進(jìn)去,我們并不能知道異步函數(shù)在調(diào)用回調(diào)函數(shù)之外做了什么事情。錯(cuò)誤捕捉相比回調(diào)函數(shù)的錯(cuò)誤無(wú)法在外部捕捉的問(wèn)題,能夠?yàn)橐贿B串的異步調(diào)用提供錯(cuò)誤處理。 前言 《JS異步編程之 callback》一文我們了解了JS 是基于單線程事件循環(huán)的概念構(gòu)建的,回調(diào)函數(shù)不會(huì)立即執(zhí)行,由事件輪詢?nèi)z測(cè)事件是否執(zhí)行完畢,當(dāng)執(zhí)行完有...
摘要:到這里,我已經(jīng)發(fā)出了一個(gè)請(qǐng)求買漢堡,啟動(dòng)了一次交易。但是做漢堡需要時(shí)間,我不能馬上得到這個(gè)漢堡,收銀員給我一個(gè)收據(jù)來(lái)代替漢堡。到這里,收據(jù)就是一個(gè)承諾保證我最后能得到漢堡。 同期異步系列文章推薦談一談javascript異步j(luò)avascript異步中的回調(diào)javascript異步之Promise.all()、Promise.race()、Promise.finally()javascr...
摘要:所以,函數(shù)的一個(gè)重要實(shí)際意義就是用來(lái)處理異步操作,改寫回調(diào)函數(shù)。表示在這里等待異步操作返回結(jié)果,再繼續(xù)執(zhí)行。 JS異步之Promise,Generator,Async Promise 解決的問(wèn)題:回調(diào)地獄 Promise規(guī)范: promise有三種狀態(tài),等待(pending)、已完成(fulfilled/resolved)、已拒絕(rejected).Promise的狀態(tài)只能從...
摘要:所以,函數(shù)的一個(gè)重要實(shí)際意義就是用來(lái)處理異步操作,改寫回調(diào)函數(shù)。表示在這里等待異步操作返回結(jié)果,再繼續(xù)執(zhí)行。 JS異步之Promise,Generator,Async Promise 解決的問(wèn)題:回調(diào)地獄 Promise規(guī)范: promise有三種狀態(tài),等待(pending)、已完成(fulfilled/resolved)、已拒絕(rejected).Promise的狀態(tài)只能從...
摘要:所以,函數(shù)的一個(gè)重要實(shí)際意義就是用來(lái)處理異步操作,改寫回調(diào)函數(shù)。表示在這里等待異步操作返回結(jié)果,再繼續(xù)執(zhí)行。 JS異步之Promise,Generator,Async Promise 解決的問(wèn)題:回調(diào)地獄 Promise規(guī)范: promise有三種狀態(tài),等待(pending)、已完成(fulfilled/resolved)、已拒絕(rejected).Promise的狀態(tài)只能從...
閱讀 2564·2021-11-24 09:39
閱讀 3579·2019-08-30 15:53
閱讀 669·2019-08-29 15:15
閱讀 2972·2019-08-26 13:23
閱讀 3319·2019-08-26 10:48
閱讀 710·2019-08-26 10:31
閱讀 845·2019-08-26 10:30
閱讀 2425·2019-08-23 18:32