首頁 > web前端 > js教程 > 如何使用 JavaScript Promisify 本機 XHR 請求?

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

DDD
發布: 2024-12-06 06:31:12
原創
1057 人瀏覽過

How to Promisify Native XHR Requests Using JavaScript?

如何 Promisify 原生 XHR

背景

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

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

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

1

2

3

4

5

6

7

8

9

10

11

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建構子:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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 物件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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可以作為非同步操作無縫執行:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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);

});

登入後複製

替代方法

承諾化的替代方法是使用 fetch API,它為承諾提供內建支援。但是,請記住,並非所有瀏覽器都支援 fetch,並且可能需要填充。

以上是如何使用 JavaScript Promisify 本機 XHR 請求?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板