如何使用 JavaScript Promisify 本機 XHR 請求？-js教程-PHP中文網

如何使用 JavaScript Promisify 本機 XHR 請求？

DDD

發布： 2024-12-06 06:31:12

原創

999 人瀏覽過

How to Promisify Native XHR Requests Using JavaScript?

如何 Promisify 原生 XHR

背景

在現代前端開發中，Promise 已成為管理非同步操作的重要工具。雖然許多框架提供了內建的承諾機制，但也可以使用本機程式碼來實現此功能。本指南示範如何將本機 XHR (XMLHttpRequest) 請求轉換為 Promise。

第1 步：定義帶有回呼的請求函數

先建立一個使用回呼的基本XHR 請求函數：

function makeRequest(method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

登入後複製

第2 步：引入Promise 構造

將此函數轉換為promisified 版本，利用Promise建構子：

function makeRequest(method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

登入後複製

第3 步：使用參數和選項進行增強

為了提高請求函數的靈活性，引入method、url 和可選參數options 物件：

function makeRequest(opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

登入後複製

用法

透過承諾的makeRequest 函數，XHR可以作為非同步操作無縫執行：

makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

登入後複製