在一个函数中组合两个 AJAX 函数,可以使用 Promise 或者 async/await 来实现。这样可以确保一个 AJAX 请求完成后,再执行下一个请求。下面是一个使用 Promise 的示例:
function ajaxRequest(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
function combinedAjaxFunction() {
ajaxRequest('https://api.example.com/data1')
.then(data1 => {
console.log('Data 1:', data1);
return ajaxRequest('https://api.example.com/data2');
})
.then(data2 => {
console.log('Data 2:', data2);
})
.catch(error => {
console.error('Error:', error);
});
}
combinedAjaxFunction();
如果你更喜欢使用 async/await,可以这样写:
async function ajaxRequest(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
async function combinedAjaxFunction() {
try {
const data1 = await ajaxRequest('https://api.example.com/data1');
console.log('Data 1:', data1);
const data2 = await ajaxRequest('https://api.example.com/data2');
console.log('Data 2:', data2);
} catch (error) {
console.error('Error:', error);
}
}
combinedAjaxFunction();
通过以上方法,你可以有效地在一个函数中组合两个 AJAX 请求,并处理相关的优势和问题。
领取专属 10元无门槛券
手把手带您无忧上云