Я пытаюсь создать простой загрузчик, который при вызове вызывает API, который возвращает данные
requestData(pageSize, page, sorted, filtered){
console.log(filtered);
var url = 'http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}';
var r = new XMLHttpRequest();
r.onreadystatechange = function () {
return new Promise((resolve, reject) =>{
if (r.readyState != 4 || r.status != 200){
reject(r);
} else {
resolve(r.responseText);
}
})
};
r.open("GET", url, true);
r.send(null);
};
fetchData(state, instance) {
this.setState({ loading: true });
this.requestData(
state.pageSize,
state.page,
state.sorted,
state.filtered
).then(res => {
this.setState({
data: res.rows,
pages: res.pages,
loading: false
});
});
}
Обе эти функции находятся в компоненте React. Проблема заключается в последнем.then(), который вызывается на объект "undefined". Почему мое обещание вернулось неправильно?
Потому что вы никогда не возвращаете ничего из requestData
. Вы просто возвращаете обещание в функцию обратного вызова, которая не попадает в никуда. Вместо того, чтобы обернуть обещание в обратный вызов, вы должны обернуть обратный вызов в обещание:
function requestData(pageSize, page, sorted, filtered){
return new Promise((resolve, reject) =>{
console.log(filtered);
var url = 'http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}';
var r = new XMLHttpRequest();
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200){
reject(r);
} else {
resolve(r.responseText);
}
};
r.open("GET", url, true);
r.send(null);
});
}
Это потому, что функция requestData
ничего не возвращает. Вы должны вернуть объект Promise, как это
requestData(pageSize, page, sorted, filtered){
return new Promise((resolve, reject) => {
console.log(filtered);
var url = 'http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}';
var r = new XMLHttpRequest();
r.onreadystatechange = () => {
if (r.readyState != 4 || r.status != 200){
reject(r);
} else {
resolve(r.responseText);
}
}
r.open("GET", url, true);
r.send(null);
});
}
requestData
ничего не возвращает.