Выборка не вернет никаких результатов

#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() также возвращает a Promise . 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 . Мне нравятся эти учебные пособия, потому что вы действительно можете редактировать код в видео. Кроме того, я заметил, что вы, похоже, никогда не помечаете ответы как правильные. Если ответы решают вашу проблему, вы должны нажать эту галочку рядом с ответом