目錄

一，“回調地獄”

二，如何解决“回調地獄”呢？於是Promise應運而生

1.Promise：定義

2.作為對象，Promise有兩個特點：

        2.1對象的狀態不受外界影響。

         2.2一旦狀態改變了就不會在變，也就是說任何時候Promise都只有一種狀態。

3，三種狀態

4，基本用法

 5，模擬异步

​編輯

6，執行步驟

​編輯

三，Promise 對象解决回調地獄

一，“回調地獄”

定義：在使用JavaScript時，為了實現某些邏輯經常會寫出層層嵌套的回調函數，如果嵌套過多，會極大影響代碼可讀性和邏輯，這種情况也被成為回調地獄。

	<script>
		setTimeout(() => {
			console.log('等待三秒後看');

			setTimeout(() => {
				console.log('再等待三秒後看');

				setTimeout(() => {
					console.log('又等待三秒才有');

					//....
				}, 3000);
			}, 3000)
		}, 3000)
	</script>

二，如何解决“回調地獄”呢？於是Promise應運而生

1.Promise：定義

定義：是异步編程的一種解决方案，可以替代傳統的解决方案——回調函數和事件。ES6統一了用法，並原生提供了Promise對象

2.作為對象，Promise有兩個特點：

        2.1對象的狀態不受外界影響。

Promise對象代錶一個异步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有异步操作的結果，可以决定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，錶示其他手段無法改變。

         2.2一旦狀態改變了就不會在變，也就是說任何時候Promise都只有一種狀態。

Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情况發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為 resolved（已定型）。

3，三種狀態

•         Pending狀態（進行中）
•         Fulfilled狀態（已成功）
•         Rejected狀態（已失敗）

        一旦發生改變就只有一種狀態：Pending -> Fulfilled  Pending -> Rejected。

4，基本用法

Resolve，用來接收完成狀態，reject ，用來接收失敗的狀態

var promise = new Promise(function(resolve,reject){
				  
				  let flag = true;
				  
				  if(flag){
					  resolve('狀態：執行成功！');
					  
				  }else{
					  reject("狀態：執行失敗！");
					  
				  }
				  
		 })

	      
 promise.then(function(resolve){
			console.log(resolve);
		},function(reject){
			console.log(reject);
})

//then方法可以接受兩個回調函數作為參數。
//第一個回調函數是Promise對象的狀態變為resolved時調用，
//第二個回調函數是Promise對象的狀態變為rejected時調用。
//這兩個函數都是可選的，不一定要提供。它們都接受Promise對象傳出的值作為參數。

 5，模擬异步

                        模擬未來即將發生的代碼。

function timeout(ms){
return new Promise(function(relove,reject){
					setTimeout(()=>{
						console.log('程序'+ms +'毫秒後打印！');
					},ms);
					
				})
}
timeout(3000);

6，執行步驟

			function timeout(ms){
               console.log(2);
				return new Promise(function(relove,reject){
					setTimeout(()=>{
						console.log(3);
						relove(4);
					},ms);

				})
				
			}
	        console.log(1);
			let res =  timeout(3000);
			res.then(relove=>{
				console.log(relove);
			})

//Promise 新建後立即執行，所以首先輸出的是Promise。然後，
//then方法指定的回調函數，
//將在當前脚本所有同步任務執行完才會執行，所以4最後輸出。

三，Promise 對象解决回調地獄

采用鏈式的then，可以指定一組按照次序調用的回調函數。這時，前一個 then 裏的一個回調函數，返回的可能還是一個 Promise對象（即有异步操作），這時後一個回調函數，就會等待該 Promise對象的狀態發生變化，才會被調用。由此實現异步操作按照次序執行。

        var sayhello = function (name) {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    console.log(name);
                    resolve();//在异步操作執行完後執行 resolve() 函數
                }, 1000);
            });
        }
        sayhello("first").then(function () {
            return sayhello("second");//仍然返回一個 Promise 對象
        }).then(function () {
            return sayhello("third");
        }).then(function () {
            console.log('end');
        }).catch(function (err) {
            console.log(err);
        })
        //輸出：first  second  third end

第一個 then 方法指定的回調函數，返回的是另一個Promise對象。

第二個then方法指定的回調函數，就會等待這個新的Promise對象狀態發生變化。

如果變為resolved，就繼續執行第二個 then 裏的回調函數