ES6:promise物件原理詳解

阿新 • • 發佈：2019-01-12

1. 理解
           * Promise物件:代表了未來某個將要發生的事件(通常是非同步操作)
           * 有了Promise物件可以將非同步操作以同步的流程表達出來,避免了層層巢狀的回撥函式(俗稱"回撥地獄")
           * ES6的Promise函式是一個建構函式,用來生成promise例項物件
       2.使用promise基本步驟(2步)
           * 建立Promise例項物件
               let promise = new Promise((resolve,reject) => {
                   // 初始化promise狀態為pending
                   // 執行非同步操作
                   if(非同步操作成功){
                       resolve(value);// 修改promise狀態為fullfilled
                   }else{
                       reject(errMSG);// 修改promise狀態為rejected
                   }
               })
           * 呼叫promise的then()

               promise.then(function(){
                   result => console.log(result)
                   errorMsg => console.log(errorMsg)
               })
       3. promise物件的3個狀態
           * pending 初始化狀態
           * fullfilled 成功狀態
           * rejected 失敗狀態
       4. 應用
           * 使用promise實現超時處理
           * 使用promise封裝處理ajax請求
               let request = new XMLHttpRequest();
               request.onreadystatechange = function (){

               }
               request.responseType = 'json';
               request.open('GET',url);
               request.send();


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>promise物件原理詳解</title>
</head>
<body>
		
</body>
<script type="text/javascript">

	// 建立promise物件(同步的)
	let promise = new Promise((resolve,reject) => {
		// 初始化promise狀態為: pending
		console.log(111)
		// 執行非同步操作,通常是傳送ajax請求,開啟定時器
		setTimeout(() => {
			console.log(333)
			// 根據非同步任務的返回結果去修改promise的狀態(原理)
			// 非同步任務成功
			resolve('哈哈 成功了!');// 自動修改promise的成功狀態: fullfilled
			// 非同步任務失敗
			reject(); // 自動修改promise的失敗狀態: rejected
		},2000)
	})
	console.log(222);// 先列印111 再222
	
	promise.then((data) => {//成功的回撥
		console.log(data, '成功了');// resolve()執行後 執行
	},(error) => {// 失敗的回撥
		console.log('失敗了');// reject()執行後 執行
	})

</script>
</html>

ES6:promise物件原理詳解

ES6:promise物件原理詳解

ES6關於Promise的用法詳解

ES6中的Promise和Generator詳解

磁盤陣列 RAID 技術原理詳解

解決ajax跨域的方法原理詳解之Cors方法

Nginx+Php-fpm運行原理詳解

虛擬化技術基礎原理詳解

常用 JavaScript 小技巧及原理詳解

es6 map()和filter()詳解【轉】

Storm概念、原理詳解及其應用（一）BaseStorm

主成分分析（PCA）原理詳解（轉載）

lvs和keeplived的工作原理詳解

js中幾種實用的跨域方法原理詳解

http原理詳解

HTTP2.0 原理詳解

css-浮動與清除浮動的原理詳解（清除浮動的原理你知道嗎）

VMware VDS原理詳解--20170922

[js高手之路] es6系列教程 - Map詳解以及常用api

歸並排序原理詳解!

DPM（Deformable Part Model）原理詳解（匯總）

ES6:promise物件原理詳解

相關推薦