promise對象和async函數的使用

Promise 對象和async函數的使用

Promise 對象

Promise 是一個對象，用於解決異步編程的一個方案，從它可以獲取異步操作的消息。

then()方法的使用
then() 方法可接收兩個函數作爲參數，第一個參數是 Promise 執行成功後的回調，第二個參數則是 Promise 執行失敗後的回調，兩個函數中只會有一個被回調，當然它也可以用於鏈式的使用。

使用then()方法模擬圖片異步加載案例

function loandImage(src){
	/*創建promise對象，這個對象需要傳入一個函數，
		這個函數需要傳入兩個參數
	  	resolve返回執行成功的狀態，reject返回失敗狀態，
	  	在函數裏寫入需要執行的異步請求
	*/
	return new Promise(function(resolve,reject){
		//使用定時器模擬延遲
		// setTimeout(function(){
			let img = new Image();	//創建一個html img元素
			img.src = src;
			//設置圖片寬高，填充到div
			img.width = 400;
			img.height = 300;
			let imgdiv =  document.getElementById("imgdiv");
			imgdiv.appendChild(img);
			
			//如果該元素的onload事件觸發，說明元素正常被加載
			img.onload = function(){
				/*
					resolve會導致返回一個成功狀態的promise對象
					resolve的參數會傳給callback
				*/
				resolve(img);
				
			}
			img.onerror = function(){
				//返回一個rejected狀態的promise對象
				reject("加載圖片失敗："+src);
			}
		},3000);
	});
}

/*調用loadImg函數,調用then()方法，方法中可以傳入一個function，
表示異步請求成功後執行，也可以傳入兩個，第二個表示異步請求失敗後執行
*/
let leg = loandImage('img/1.jpg')
.then(
	function(img){
		console.log("加載成功1");
		return loandImage('img/2.jpg');
	},function(msg){
		console.log(msg);
	}
)
.then(
	function(img){
		console.log("加載成功2");
		return loandImage('img/3.jpg');
	}
	,function(msg){
		console.log(msg);
	}
)
.then(
	function(){
		console.log("加載成功3");
	}
	,function(msg){
		console.log(msg);
	}
)

catch()方法
catch()方法是用於指定發生錯誤時的回調函數，其作用更then()方法第二個參數效果是一樣的，我就不做過多的介紹了。

async函數

• async 是 ES7 纔有的與異步操作有關的關鍵字，和 Promise ， Generator 有很大關聯的。但是現在目前主流的瀏覽器也大都支持了這套語法。
• async 函數它是返回一個 Promise 對象，同樣的我們也可以使用 then()方法添加回調函數。

async函數的使用
我們只需要在函數前面加上async關鍵字即可。

async function firstAsync(){
    return "firstAsync";
}
console.log(firstAsync());

運行結果：

我們可以看到，這個函數所返回的對象正是Promise對象，所有說我們也同樣可以使用then()方法和catch()方法。

await的使用

await 操作符用於等待一個 Promise 對象, 它只能在異步函數 async function 函數內使用在其他函數中使用是用不了的。
案例：

function calculate(num){
	return new Promise(function(resolve,reject){
		//模擬延遲 
		setTimeout(function(){
			resolve(num * 2);
		},1000);
		
	});
}

async function calc() {
	let result1 = await calculate(2);
	let result2 = await calculate(result1);
	let result3 = await calculate(result2);
	console.log("計算結果是"+result3);
}
calc();

運行結果：

我們可以看到使用await後數據是正確的，接着再看看去掉await關鍵字後的效果

很明顯，這個異步的計算就出問題了。

以上就是promise對象和async函數的基本使用，感謝觀看