?
[if !supportLists]第一章 [endif]Promise
Promise對(duì)象是一個(gè)代理對(duì)象(代理一個(gè)值),被代理的值在Promise對(duì)象創(chuàng)建時(shí)可能是未知的。它允許你為異步操作的成功和失敗分別綁定相應(yīng)的處理方法(handlers)狼荞。 這讓異步方法可以像同步方法那樣返回值,但并不是立即返回最終執(zhí)行結(jié)果撒璧,而是一個(gè)能代表未來出現(xiàn)的結(jié)果的promise對(duì)象
一個(gè)Promise就3種狀態(tài):pending:初始狀態(tài)喳张,既不是成功,也不是失敗狀態(tài)岂丘。fulfilled:意味著操作成功完成陵究。rejected:意味著操作失敗。
[if !supportLists]一奥帘、[endif]關(guān)于promise對(duì)象
創(chuàng)建一個(gè)promise實(shí)例铜邮,然后直接打印會(huì)報(bào)錯(cuò)
<script>????var pro = new Promise();????console.log(pro);</script>
原因就是當(dāng)創(chuàng)建一個(gè)promise實(shí)例的時(shí)候,需要在里面放一個(gè)函數(shù):
<script>????var pro = new Promise(() => {});????console.log(pro); // 打印promise實(shí)例</script>
----------------------
如果在函數(shù)里面寨蹋,寫一些代碼松蒜,會(huì)發(fā)現(xiàn)內(nèi)部代碼立即執(zhí)行了
<script>????var pro = new Promise(() => {????????console.log("實(shí)例化..."); // 立即執(zhí)行????});</script>
----------------
在promise的函數(shù)中傳入兩個(gè)參數(shù):resolve和reject ,表示成功的狀態(tài)和失敗的狀態(tài):
<script>????var pro = new Promise((resolve, reject) => {????????console.log("實(shí)例化...");????????// resolve() // "fulfilled"????????reject() // "rejected"????});????console.log(pro);</script>
------------------
一旦進(jìn)入到成功或失敗的狀態(tài)已旧,就無法再改變狀態(tài)了:
<script>????var pro = new Promise((resolve, reject) => {????????console.log("實(shí)例化...");????????resolve() // "fulfilled" 進(jìn)入到成功狀態(tài)秸苗,reject就沒有用了????????reject() // 不會(huì)執(zhí)行????});????console.log(pro);</script>
----------------------
當(dāng)異步代碼執(zhí)行成功時(shí),我們應(yīng)該調(diào)用resolve(...),resolve會(huì)把實(shí)參傳給then评姨; 當(dāng)異步代碼失敗時(shí)應(yīng)該調(diào)用reject(...)难述,reject會(huì)把實(shí)參傳給catch
<script>????var pro = new Promise((resolve, reject) => {????????var xhr = new XMLHttpRequest();????????xhr.onreadystatechange = function () {????????????if (xhr.readyState == 4) {????????????????if (xhr.status == 200) {????????????????????resolve('歐耶,成功了:' + xhr.responseText)????????????????} else {????????????????????reject('哥們吐句,失敗了:' + xhr.statusText)????????????????}????????????}????????}????????xhr.open('get', 'a.txt', true);????????xhr.send(null);????});????pro.then((successMessage) => {????????// successMessage的值是上面調(diào)用resolve(...)方法傳入的實(shí)參????????// successMessage參數(shù)不一定非要是字符串類型????????console.log('then:' + successMessage);????});????pro.catch((error) => {????????console.log(error);????})</script>
---------------------
then方法執(zhí)行完之后有一個(gè)返回值胁后,返回的是一個(gè)新的Promise對(duì)象,所以可以使用鏈?zhǔn)椒椒ɡ^續(xù)調(diào)用then方法:
<script>????var pro1 = new Promise((resolve, reject) => {????????resolve('成功1')????});????var pro2 = pro1.then((value) => {????????console.log(value); // 成功1????????// return 111????????return new Promise((resolve, reject) => {????????????// resolve('成功2')????????????reject("失敗2")????????});????});????pro2.then((value) => {????????console.log('then2:' + value); // then2:成功2????});????pro2.catch((error) => {????????console.log(error);????});????console.log(pro2);</script>
--------------------
catch除了可以接收reject信息嗦枢,還可以攔截錯(cuò)誤信息攀芯,捕獲前面鏈?zhǔn)秸{(diào)用中的錯(cuò)誤信息:
<script>????var pro1 = new Promise((resolve, reject) => {????????resolve('成功1')????});????var pro2 = pro1.then((value) => {????????console.log(1);????})????????.then((value) => {????????????console.log(2);????????????a // 這里寫個(gè)a就報(bào)錯(cuò)了????????})????????.then((value) => {????????????console.log(3);????????})????????.catch((err) => {????????????console.log(err);????????})????????.finally(() => {????????????// 不過是then還是catch,我都會(huì)執(zhí)行????????????console.log('執(zhí)行完了文虏!');????????})????console.log('啦啦啦~');</script>
finally方法不管前面是走的then還是catch 都會(huì)執(zhí)行侣诺。