#javascript #fetch
#javascript #выборка
Вопрос:
Я никогда fetch
раньше не использовал и следовал документации, однако из моего бэкэнда не возвращаются результаты. Когда я отправляю форму, URL-адрес изменяется, и в моей консоли все отображается нормально, но ответа от моего серверной части express нет.
Следующий код — это то, что у меня есть после моей формы в теге script. Может кто-нибудь посоветовать?
async function getSample(url = `http://localhost:3000/lookup/${url}`, data = {}) {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json();
}
document.getElementById('search').addEventListener('submit', function(e) {
event.respondWith(
new Response(myBody, {
headers: {'Content-Type': 'application/json'}
})
);
});
Комментарии:
1. а) Вы не вызываете
getSample()
. б)event.respondWith()
должен использоватьсяFetchEvent
с. в)response.json()
также возвращает aPromise
. d) Вы используетеurl
значение по умолчанию дляurl
. e) Поставить точку останова илиconsole.log()
на сервере, она вызывается?2. @ChayimFriedman
console.log()
На сервере есть. Под вызываемым вы подразумеваете a.get
?3. Нет, я имею в виду, что нет никакого вызова
getSample()
4. @ChayimFriedman не на моем серверном экспресс-сервере
5. В вашем интерфейсе — это функция, которая должна выполнять
fetch()
Ответ №1:
Вы можете попробовать создать обещание, а затем обработать значение, возвращаемое выборкой, с помощью resolve и reject
async function getSample(url = `http://localhost:3000/lookup/${url}`, data = {}){
return new Promise(function (resolve, reject) {
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(async response => {
if (response.ok) {
response.json().then(json => resolve(json));
} else {
response.json().then(json => reject(json));
};
}).catch(async error => {
reject(error);
});
});
};
Затем вы бы назвали это как
getSample(...)
.then(results => {
//Code when fetch is successful
}.catch(error => {
//Code when fetch fails
};
Я думаю, что проблема с тем, что он ничего не возвращает, заключается в том, что getSample
это асинхронная функция, но я полагаю, что вы вызываете ее в программе, которая не является асинхронной, и поэтому любой код, который приходит после getSample
, использует попытку использовать значение, возвращенное из getSample
, но пока ничего не возвращено, поэтому используется пустое значение. Либо это, либо возврат getSample происходит до завершения выборки. Я не уверен в точном порядке, в котором все происходит, но обещание должно решить вашу проблему
Комментарии:
1. Спасибо!! Мой серверный сервер асинхронный. Подходит ли для этого обещание?
2. Я так себе представляю. Вы можете прочитать документы Mozilla по promises , если хотите
3. Вот руководство по promises и вот руководство по fetch . Мне нравятся эти учебные пособия, потому что вы действительно можете редактировать код в видео. Кроме того, я заметил, что вы, похоже, никогда не помечаете ответы как правильные. Если ответы решают вашу проблему, вы должны нажать эту галочку рядом с ответом