1.情景展示

在前端js原始碼時，遇到了大量的Promise物件的用法，看得是一臉懵逼，Promise到底是個什麼？

2.具體分析

在實際開發過程中，我們往往會遇到這樣的場景：

以ajax請求為例，我們知道，只有在請求結束後才能進行下一步操作，雖然預設情況下是非同步請求，並不影響後續程式碼的執行；

但是，要在拿到想要的資料進行下一步操作時，這個地方我們是繞不開的，必須是同步的；

如果使用原生的ajax或者jQuery封裝的ajax，遇到複雜的業務時，程式碼寫的經常是又臭又長；

為了程式碼更加具有可讀性和可維護性，我們能不能將資料請求與資料處理明確的區分開來呢？

<script type="text/javascript">
	$.ajax({
		url : '<%=request.getContextPath()%>/ycyl/dcm/view.do?dcmPath=uploadfile/123&RESULT_TYPE=json',
		method: 'get',
		success: function(response) {
			var fileNames = response.fileNames;
			for (var i = 0; i < array.length; i++) {
	    		console.log(fileNames[i]);
			}
		},
		error: function(error) {
			console.log(error);
		}
	});
</script>
 

3.解決方案

Promise物件有三種狀態，他們分別是：

• pending: 等待中，或者進行中，表示還沒有得到結果
• resolved(Fulfilled): 已經完成，表示得到了我們想要的結果，可以繼續往下執行
• rejected: 也表示得到結果，但是由於結果並非我們所願，因此拒絕執行

這三種狀態不受外界影響，而且狀態只能從pending改變為resolved或者rejected，並且不可逆。在Promise物件的建構函式中，將一個函式作為第一個引數。而這個函式，就是用來處理Promise的狀態變化。

new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})
 

  上面的resolve和reject都為一個函式，他們的作用分別是將狀態修改為resolved和rejected。
  Promise物件中的then方法，可以接收建構函式中處理的狀態變化，並分別對應執行。then方法有2個引數，第一個函式接收resolved狀態的執行，第二個引數接收reject狀態的執行。   then方法的執行結果也會返回一個Promise物件。因此我們可以進行then的鏈式執行，這也是解決回撥地獄的主要方式。
  我們可以使用Promise物件來解決資料傳遞的問題。

前提：在頁面中引入jQuery.min.js檔案。

我們可以對ajaxGet請求做進一步封裝：

function ajaxGet(url) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: url,
            method: 'get',
            success: function(response) {
                resolve(response);
// 					resolve(eval('(' + response + ')'));
            },
            error: function(response) {
                reject(response);
// 					reject(eval('(' + response + ')'));
            }
        });
    });
}
 

呼叫方法一：

var url = '<%=request.getContextPath()%>/ycyl/dcm/view.do?dcmPath=uploadfile/123&RESULT_TYPE=json'; 
ajaxGet(url).then(function(response) {// ajax請求成功，執行reject
    var fileNames = response.fileNames;
    for ( var i in fileNames) {
        console.log(fileNames[i]);
    }
}, function(error) {// ajax請求失敗，執行reject
    console.log(error);
});

ajax走success：

ajax走error：

如果不需要走reject，在呼叫的時候可以將對該函式的呼叫，省略。

ajaxGet(url).then(function(response) {
    var fileNames = response.fileNames;
    for ( var i in fileNames) {
        console.log(fileNames[i]);
    }
});

呼叫方法二： 

var url = '<%=request.getContextPath()%>/ycyl/dcm/view.do?dcmPath=uploadfile/123&RESULT_TYPE=json'; 
ajaxGet(url).then(response => {
    var fileNames = response.fileNames;
    for (let fileName of fileNames) {
        console.log(fileName);
    }
}, error => console.log(error));

 不需要走reject

var url = '<%=request.getContextPath()%>/ycyl/dcm/view.do?dcmPath=uploadfile/123&RESULT_TYPE=json'; 
ajaxGet(url).then(response => {
    var fileNames = response.fileNames;
    for (let fileName of fileNames) {
        console.log(fileName);
    }
});

方法二的執行結果和方法一一樣，這裡不再展示。

兩種方法，只是對匿名函式的呼叫方式有所區別，但是，效果是一樣的。 

寫在最後

　　哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！

 相關推薦：

• 個人主頁
• ajax與後臺進行資料互動的幾種常用方式（最全）