promise和async、await的用法

一、Promise

1、promise的含義

是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。

2、Promise的特點

(1)對象的狀態不受外界影響,有三種狀態:

pending(進行中)

fulfilled(已成功 調用resolve後promise進入fulfilled狀態)

rejected(已失敗 調用reject之後promise進入rejected狀態)

resolve表示成功的狀態;reject表示失敗的狀態;)

(2)一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:

pending 變爲 fulfilled。(從“未完成”變爲“成功”)

pending 變爲 rejected。(從“未完成”變爲“失敗”)

promise初始狀態爲pending

只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。

3、promise使用

基本用法

let pro = new Promise((resolve,reject) =>{
	if(true){
		resolve('成功')
	}else{
		reject('失敗')
	}
})
//resolve對應then的回調結果
//reject對應catch的回調結果
pro.then(function(rst){
	console.log(rst);
}).catch(function(err){
	console.log(err);
})

鏈式操作
.then 是一個鏈式操作,也就是說 then 內部會返回一個promise對象,這個promise默認就是當前promise

let pro = new Promise(function(resolve,reject){
	setTimeout(() =>{
		resolve('成功');
	},2000);
})
pro.then(function(rst){
	console.log(rst);
	return '成功1';
}).then(function(rst){
	console.log(rst);
	return '哈哈哈哈哈哈哈';
}).then(function(rst){
	console.log(rst);
}).catch(function(err){
	console.log(err);
})

promise調用http數據

var p = new Promise(function(resolve,reject){
	$.ajax({
		type: 'method',
		url: 'url',
		//data: 'data',
		//dataType: 'json',
		success: function(response) {},
		error: function(err) {},
	})
})
p.then(function(rst){}).catch(function(err){});

二、async await

1、async和await是什麼

async 是“異步”的意思,await 是等待的意思。所以很好理解 async 用於申明一個 異步的function(實際上是async function 對象),而 await 用於等待一個 異步任務執行完成的 結果。

注: await 只能出現在 async 函數中。

async 告訴程序這是一個異步操作,await 是一個操作符,即 await 後面是一個表達式。

async function a(){
	return 'hello async';
}
const result = a();
	console.log(result);

結果:
在這裏插入圖片描述
既然返回的是Promise 對象,所以在最外層不能直接獲取其返回值,那麼肯定可以用原來的方式:then() 鏈來處理這個 Promise 對象,如:

async function a(){
	return 'hello async';
}
const result = a();
	console.log(result);
a().then(v =>{
	console.log(v);  //hello async
})

結果:先打印 Promise 對象 ,後打印 hello async
在這裏插入圖片描述
await 操作符

await 表達式會暫停當前 async function 的執行,等待 Promise 處理完成。若 Promise 正常處理(fulfilled),其回調的 resolve函數的參數 作爲 await 表達式的值,繼續執行async function內的後面代碼。若 Promise 處理異常(rejected),await 表達式會把 Promise 的異常原因拋出。另外,如果 await 操作符後的表達式的值如果不是一個 Promise,則返回該值本身。

await會暫停當前async 函數執行,並且await 後面是一個表達式,即這個await 等待的是一個表達式(這個表達式返回promise 對象或者一個具體的值):

(1)假如這個表達式返回的是一個Promise 對象, 那麼它的返回值,實際上就是 Promise 的回調函數 resolve 的參數,如果這個Promise rejected 了,await 表達式會把 Promise 的異常拋出。

(2)假如這個表達式如果返回的是一個常量,那麼會把這個常量轉爲Promise.resolve(xx),同理如果沒有返回值也是Promise.resolve(underfind)

async function testAwait(){
	const data = await "hello await";
	console.log(data); //hello await
	return data;
}
console.log(testAwait()); //promise

結果:先打印 Promise 對象 ,後打印 hello await
在這裏插入圖片描述

async 告訴程序這是一個異步,awiat 會暫停執行async中的代碼,等待 await表達式 後面的結果,等await
表達式後面的結果返回以後,繼續執行 async函數內 後面的代碼,在結果返回之前會繼續執行 async函數之後
的代碼。(可以查看代碼打印順序)

async 函數會返回一個Promise 對象,當 async 函數返回一個值時,Promise 的 resolve
方法會負責傳遞這個值;當 async 函數拋出異常時,Promise 的 reject 方法也會傳遞這個異常值。

await 操作符用於等待一個Promise 對象,並且返回 Promise 對象的處理結果(成功把resolve 函數參數作爲await
表達式的值),如果等待的不是 Promise 對象,則用 Promise.resolve(xx) 轉化

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章