菜鳥MIS的Coding日記

用一杯咖啡，一行程式碼，描述人生

2020-10-25

JavaScript非同步處理-Promise物件

傳統JS執行非同步處理是利用回呼函數(Callback)，如果要執行多個非同步處理會以巢狀方式配置回呼函數，但會因為層次太多而形成回呼地獄

function(function(data){
  function(function(data){
   function(function(data){
    function(function(data){
     
   })
  })
 })
})

要解決這樣的問題就是使用Promise物件，上面函數改用Promise

function().then(function).then(function).then(function)

 

Promise程式結構

function asyncProcess(value) {//將要非同步處理的寫成一個函數
            return new Promise((res) => {//res是當非同步處理成功或失敗要通知的函數參數，也可設定兩個分別為成功與失敗的函數參數(res,err)
                setTimeout(() => {
                    if (value) {
                        res(`輸入值:${value}`);
                    } else {
                        res('輸入為null!');
                    }
                }, 1000)
            });
        }
        document.getElementById('btn').onclick = function () {
            var text = document.getElementById('name').value;
            asyncProcess(text).then((response) => {//then方法分別接收成功與失敗時的處理，成功為response處理，失敗則由error處理，此處參數名稱可自由定義
                console.log(response);
            },
                (error) => {
                    console.log(error);
                }
            );
        }

 

系列文章