在js里如何确保执行完xhr后再执行函数
时间: 2024-05-08 14:15:40 浏览: 5
您可以将函数作为回调函数传递给xhr对象的onload或onreadystatechange事件处理程序。当xhr请求完成时,将自动调用回调函数。
示例:
```javascript
function myFunction() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.onload = function() {
// 在xhr完成后执行的代码
console.log('xhr请求完成');
// 调用回调函数
myCallback();
};
xhr.send();
}
function myCallback() {
// 在xhr完成后执行的回调函数
console.log('回调函数被执行');
}
myFunction();
```
在上面的示例中,当xhr请求完成时,将调用onload事件处理程序。在此处理程序中,我们首先执行一些代码,然后调用我们的回调函数myCallback()。 因此,确保在xhr完成后执行myCallback()函数。
相关问题
在js里面如何确保执行完xhr 取得某变量值后,再执行一个函数
可以将需要在xhr取得变量值后执行的函数写成回调函数,并在xhr的回调函数中调用,确保xhr取得变量值后再执行。示例代码如下:
```javascript
function xhrRequest(callback) {
// 发送xhr请求,取得变量值
const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/api/data');
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
const variable = data.variable;
callback(variable); // 在xhr回调函数中调用回调函数,确保xhr取得变量值后再执行
}
};
xhr.send();
}
function myFunction(variable) {
// 执行需要在xhr取得变量值后执行的函数
console.log(variable);
}
xhrRequest(myFunction); // 将需要在xhr取得变量值后执行的函数作为回调函数传入xhrRequest函数中
```
让ajax执行完后再继续往下执行
可以使用回调函数或者Promise来实现让ajax执行完后再继续往下执行的效果。
使用回调函数的方式:
```javascript
function ajax(url, successCallback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status === 200) {
successCallback(xhr.responseText);
}
};
xhr.send();
}
ajax('http://example.com/data', function(responseText) {
console.log('ajax请求成功,数据为:' + responseText);
// 在这里继续执行其他代码
});
```
使用Promise的方式:
```javascript
function ajax(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
};
xhr.onerror = function() {
reject(new Error('请求失败'));
};
xhr.send();
});
}
ajax('http://example.com/data')
.then(function(responseText) {
console.log('ajax请求成功,数据为:' + responseText);
// 在这里继续执行其他代码
})
.catch(function(error) {
console.error('ajax请求失败,原因为:' + error.message);
});
```