[JavaScript] 非同步處理技巧 回呼函式 Callback

在前一篇文章： javascript-非同步asynchronus-函式 中，我們介紹了 非同步(Asynchronus) 的觀點了，再來將說明如何使用 回呼函式(callback) 來進行撰寫較易維護的編碼：

編碼如下，下方是一個 AJAX 的範例：

var req = new XMLHttpRequest();

req.open('get','http://skyroxas.tw/aboutme');

req.onload = function(){
  var content = this.responseText;
}

req.send(); //執行連線

上面的範例中，如果我們要在主程式中取得到 this.responseText， 的資料進行操作，是一件非常困難的事情

不只是單單 作用域 上的問題，還有就是你沒有辦法掌握到 連線時間 的長短，如下：

function getData(){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    return this.responseText;
  }
  req.send(); //執行連線 
}

console.log(getData()) //undefined

但是如果直接在 onload() 的作用域中，直接對 this.responseText， 的資料進行操作

雖然是可行的，但如果操作的事件一多，很容易 降低編碼的可讀性，與 增加不少後續的維護時間，如下：

function getData(){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    //codeing........
    //codeing........
    console.log(this.responseText)
  }
  req.send(); //執行連線 
}
getData();

使用 回呼函式（callback）

我們用 回呼函式（callback）的方式，讓 AJAX 在 取得連線時，在執行一隻另外宣告的函式，如下：

function getData(callback){
  var req = new XMLHttpRequest();
  req.open('get','http://skyroxas.tw/aboutme');
  req.onload = function(){
    callback(this.this.responseText) // 在這邊呼叫另一隻函數，並將取得結果傳入
  }
  req.send();
}
function showData(data){
    //codeing........
    //codeing........
    console.log(data)
}
getData(showData);

使用 回呼函式（callback）的方式，可以解決我上面所說的問題

另外在 ES6 中有另外有提供一種專門用來處理 非同步(Asynchronus) 編程 的物件 Promises ， 在後續會進行說明