摘要:構造函數回調函數是同步的回調異步操作的實例對象有三個狀態初始狀態,既不是成功,也不是失敗狀態。如果中的回調函數拋出一個錯誤,那么返回的將會成為拒絕狀態,并且將拋出的錯誤作為拒絕狀態的回調函數的參數值。
問題:解決異步回調的深層嵌套的問題.(回調地獄)1. Promise
promise對象用于表示一個異步操作的最終狀態,promise在回調代碼和將要執行這個任務的異步代碼之間提供了一種可靠的中間機制來管理回調。
//構造函數,回調函數是同步的回調 new Promise(function(resolve,reject){ ....//異步操作 })
Promise的實例對象有三個狀態
?pending: 初始狀態,既不是成功,也不是失敗狀態。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗
resolve和reject分別是兩個函數,當在回調中調用時,會改變promise實例的狀態,resolve改變狀態為成功,reject為失敗.
then
Promise.prototype.then()
當promise對象的狀態發生改變時,綁定在其身上的then方法就會被調用。
then方法包含兩個參數:onfulfilled函數 和 onrejected函數,它們都是 Function
類型。當Promise狀態為fulfilled時,調用 then 的 onfulfilled 方法,當Promise狀態為rejected時,調用 then 的 onrejected 方法, 所以在異步操作的完成和綁定處理方法之間不存在競爭,then() 方法返回一個?Promise對象.
返回值
then方法返回一個新的Promise,而它的行為與then中的回調函數的返回值有關:
如果then中的回調函數返回一個值,那么then返回的Promise將會成為接受狀態,并且將返回的值作為接受狀態的回調函數的參數值。
如果then中的回調函數拋出一個錯誤,那么then返回的Promise將會成為拒絕狀態,并且將拋出的錯誤作為拒絕狀態的回調函數的參數值。
如果then中的回調函數返回一個已經是接受狀態的Promise,那么then返回的Promise也會成為接受狀態,并且將那個Promise的接受狀態的回調函數的參數值作為該被返回的Promise的接受狀態回調函數的參數值。
如果then中的回調函數返回一個已經是拒絕狀態的Promise,那么then返回的Promise也會成為拒絕狀態,并且將那個Promise的拒絕狀態的回調函數的參數值作為該被返回的Promise的拒絕狀態回調函數的參數值。
如果then中的回調函數返回一個未定狀態(pending)的Promise,那么then返回Promise的狀態也是未定的,并且它的終態與那個Promise的終態相同;同時,它變為終態時調用的回調函數參數與那個Promise變為終態時的回調函數的參數是相同的。
catch
catch()?方法返回一個Promise,并且處理拒絕的情況。
Promise.prototype.catch()
事實上,catch方法相當于then方法的第二個參數方法,觸發拒絕狀態.
注意,
如果調用?then的?Promise?的狀態(fulfillment 或 rejection)發生改變,但是?then?中并沒有關于這種狀態的回調函數,那么?then?將創建一個沒有經過回調函數處理的新?Promise?對象,這個新?Promise?只是簡單地接受調用這個?then?的原?Promise?的終態作為它的終態。所以在鏈式上,最終會執行到catch上.
//鏈式示例 new Promise(function (resolve, reject) { setTimeout(function () { console.log("1"); resolve(); }, 1000); }).then(function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("2"); // resolve(); reject(); }, 1000); }); }).then(function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("3"); resolve(); }, 1000); }); }).then(function () { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("4"); resolve(); }, 1000); }); }).catch(function(){ console.log("catch"); })2. genarator
symbol
新的一種基礎數據類型symbol,表示獨一無二的值.
它通常作為對象的屬性鍵,內置對象普遍存在該值.
// 一般用法,它并不是構造器,不能通過new,會報錯. let sym = Symbol(); // 在對象中表現形式,要用[]包裹,不然會被認為是string. var obj = { [Symbol()]:"value"; }
該屬性是匿名,所以不可枚舉,只能通過.getOwnPropertySymbols()返回的數組.
// 想要獲得兩個相同的Symbol,得通過.for() Symbol("asd") === Symbol("asd") // false Symbol.for("asd") === Symbol.for("asd") // true
Iterator
迭代器,存在于特定幾種可枚舉的數據類型中.
// 一般用以下這種形式的鍵保存了迭代器函數. // arr[Symbol.iterator] aarr[Symbol.iterator]( ).next( ) //遍歷下一個,返回value和done,value表示值,done表示是否可以繼續遍歷下一個. //for...of循環遍歷就是基于此,必須該數據類型有迭代器.
回到generator
//表現形式 function* test(){ yield 1; //任務1 yield 2; //任務2 yield 3; //任務3 yield 4 ; //任務4 } // 調用該方法會返回一個含有迭代對象的對象. var obj = text(); obj.next(); //調用該方法時,每次到一個yield處停止.3. async/await
作用:
簡化promise的使用編碼, 不通過then()/catch()來指定回調函數
以同步編碼方式實現異步流程
async function test (){ // 等待狀態改變,自動執行到下一個wait處 var flag = await new Promise((resolve,reject)=>{ setTimeout(function(){ // 狀態改變 resolve(data); //這里面的值傳遞給flag },1000) }) //通過flag傳遞數據 flag = await new Promise((resolve,reject)=>{ setTimeout(function(flag){ // 狀態改變 resolve(flag); },1000,flag) }) } test().catch(function(err){ //處理異常 });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/103667.html
摘要:公司的招聘要求都提到了至少熟悉其中一種前端框架,有前端工程化與模塊化開發實踐經驗相關字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術選型,并來說說選其技術的幾大優勢。技術的優勢互聯網前端大潮后,前端出現了大框架,分別是與。 1、技術選型的背景前端技術發展日新月異,互聯網上出現的新型框架也比較多,如何讓新招聘的人員...
摘要:組件提供了很多實用的組件包括控制臺組件定時器觸發器日志處理等等致謝從下一章開始,我們逐步使用的各項功能并開發一個簡單的并發版爬蟲系統,感謝你看到這里,希望本文可以幫到你,謝謝 showImg(https://segmentfault.com/img/bVbpts4?w=640&h=160); 前言 我一生的文章都會放在這里,我的博客,我希望每一行代碼,每一段文字都能幫助你。https:...
摘要:簡介是什么是一個響應式管理框架,實現了對的異步響應式管理。可靠性已經通過個測試用例的全面測試,穩定可靠。安裝是一個狀態管理框架,需要配合使用。 Pastate 簡介 Pastate 是什么 Pastate 是一個響應式 react state 管理框架,實現了對 state 的異步響應式管理。Pastate 是一個精益框架,它對很多高級概念進行了友好封裝,這意味著你不必學習一些難以理解...
閱讀 2039·2021-11-08 13:14
閱讀 2945·2021-10-18 13:34
閱讀 2034·2021-09-23 11:21
閱讀 3597·2019-08-30 15:54
閱讀 1764·2019-08-30 15:54
閱讀 2936·2019-08-29 15:33
閱讀 2589·2019-08-29 14:01
閱讀 1950·2019-08-29 13:52