如何 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中文網其他相關文章!