一個基本的香草 javascript AJAX 裝載機

Question

我正在嘗試編寫一個簡單的 function 從 ajax 調用返回數據。 這是我所擁有的

var mytext = "";

function load(url){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onloadend = function(e){
        return xhr.responseText;
    }
}

var mytext = load('window.html');

console.log(mytext);

我被卡住了，如何獲得返回值？ 我是 function 中的 function，我迷路了:(

Answer 1

有幾種方法可以做到這一點。 由於您似乎是 javascript 的新手，您可以從callback開始：

 function load(url, callback){ var xhr = new XMLHttpRequest(); xhr.onloadend = function(e){ callback(xhr); }; xhr.open('GET', url); xhr.send(); } load('/', function (data) { console.log(data); });

在此示例中， callback是 function，我們在調用時將xhr作為參數傳遞給該 function。

Answer 2

我的建議是使用Promise並fetch API。

function ajax(options) {
  return new Promise(function (resolve, reject) {
    fetch(options.url, {
      method: options.method,
      headers: options.headers,
      body: options.body
    }).then(function (response) {
      response.json().then(function (json) {
        resolve(json);
      }).catch(err => reject(err));
    }).catch(err => reject(err));
  });
}

你可以像這樣使用它：

  const ajaxResponse = await ajax({url: '/some/api/call', method: 'get'});

如果您還不知道， await只能在async函數中使用。 如果您不想使用async函數，請執行以下操作：

ajax({url: '/some/api/call', method: 'get'}).then(data => {
  // process data here
});

解釋：

JavaScript 是一種單線程語言。 這意味着一切都以阻塞方式運行。 如果您的 Ajax 調用需要 3 秒，那么 JavaScript 將暫停 3 秒。 幸運的是， XMLHttpRequest和fetch API 通過使用異步函數解決了這個問題，這意味着代碼可以在 Ajax 調用等待響應時繼續運行。

在您的代碼中，您沒有收到來自 function 的響應，因為 Ajax 調用不會停止執行，這意味着在進行調用時，還沒有什么可以返回，到調用完成時，函數的調用也是很久以前的事了。 您可以告訴 JavaScript 但是通過Promise跟蹤此異步任務。 當您的任務完成后，將使用來自 Ajax 調用的數據調用Promise then function 。

JavaScript 還提供語法糖，使閱讀異步代碼更容易。 當我們使用async function 時，我們實際上在做的是創建一個常規的 function，其主體包裹在Promise中。

這也意味着，當您想要等待前一個Promise的結果時，您可以在Promise引用前面添加await並等待Promise完成。

所以你可能有如下代碼：

const call = await ajax({ ... });
console.log(call);

這實際上轉化為以下內容：

ajax({ ... }).then(call => {
  console.log(call);
});