淺談 : Promise使用解析


example 1
w1 =>w3=>w2
function w1(){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w1");
			resolve({w1:"w1數據"})
		},2000)
	});
	
	
};
function w2(data){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w2:"+data);
			resolve({w1:"data:w2數據"})
		},1000)
	});
};
function w3(){
	console.log("w3");
};
//[區別example2]
w1().then((data)=>{
	w2(data)
}).then((data)=>{
	w3();
}).catch((error)=>{
	console.log(error);
})
總結:function W3 在w2執行,因爲then指代於w1,w3和w2無關係 
example 2
w1=>w2=>w3
function w1(){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w1");
			resolve({w1:"w1數據"})
		},2000)
	});
	
	
};
function w2(data){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w2:"+data);
			resolve({w1:"data:w2數據"})
		},1000)
	});
};
function w3(){
	console.log("w3");
};
//區別[example1]
w1().then((data)=>{
	w2(data).then((data)=>{
		w3();
	}).catch((error)=>{
		console.log(error);
	})
}).catch((error)=>{
	console.log(error);
})
總結:執行順序w1=>w2=>w3,但是不屬於鏈式結構
example 3
function w1(){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w1");
			resolve({w1:"w1數據"})
		},2000)
	});
	
	
};
function w2(data){
	return new Promise(function (resolve, reject) {
		setTimeout(()=>{
			console.log("w2:"+data);
			resolve({w1:"data:w2數據"})
		},1000)
	});
};
function w3(){
	console.log("w3");
};
//[區別example2]
w1().then((data)=>{
   return w2(data)
}).then((data)=>{
   return w3();
}).catch((error)=>{
	console.log(error);
})
總結:執行順序w1=>w2=>w3,鏈式結構

example 4【進階】
//[定義一個公共的promise實例]
function sendRequest(url, param) {
	return new Promise(function (resolve, reject) {
		request(url, param, resolve, reject);
	});
}
//ajax發送請求
function request(url, param, resolve, reject){
	setTimeout(()=>{
		console.log(url,param);
		resolve({id:1,name:'AA'});
	},1000)
};
//數據依次依賴前一個請求的值
sendRequest().then(function(data1) {
	console.log('第一次執行, 這是返回的數據:', data1);
	return sendRequest(data1.id,data1.name);
}).then(function(data2) {
	console.log('第二次執行, 這是返回的數據:', data2);
	return sendRequest();
}).then(function(data3) {
	console.log('第三次執行, 這是返回的數據:', data3);
}).catch(function(error) {
	//用catch捕捉前面的錯誤
	console.log('sorry, 請求失敗了, 這是失敗信息:', error);
});

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