Jak poczekać na odpowiedź serwera ?

Mam plik w ktorym jest jedna uniwersalna funkcja ten plik to follow.js, kod tego pliku jest taki

function follow() {
    return {
        add(hash) {
            fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: data,
            })
            .then((response) => response.json())
            .then((responseData) => {
                if (responseData.error == 1) {
                    console.log(responseData.message)
                } else {
                    console.log(responseData.message)
                }
            })
            .finally((data) => {
                this.loading = false
            })
        },
    }
}

Po wykonaniu tej funkcji uzytkownik dodaje innego uzytkownika do obserwowanych. Poniewaz uzywam tego pliku w roznych mijscach to czasem potrzebuje dodac inna reakcje po tym jak ta funkjca wyzej zostanie dodana

W pliku htm w ktorym chce wykonac te funkcje mam nastepujacy kod

<li x-data="following()" class="flex-grow-1">
  <a class="btn bg-dark-dim d-block" @click="add('hyy62wg')">Obserwuj</a>
</li>

<script async src="{{ asset('assets/js/follow.js') }}"></script>
<script>
      function following() {
          return {
              add(hash) {
                  follow().add(hash)
              }
          }
      }
</script>

Probowalem juz roznych rzeczy z asycn i await ale wszystko mna nic. Potrzebuje zrobic tak ze po wykonaniu tej funkcji
follow().add(hash) oczekuje na odpowiedz i w zaleznosci od niej wykonam tu jakies czynnosci cos na zasadzie
odpowiedz = follow().add(hash)

Funkcja add powinna zwracać wartość stworzonego promise

function follow() {
  return {
    loading: false,
    add(hash) {
      return 
        fetch(url, ...)
        .then(response => response.json())
        .then(...)
        .finally(() => {
           this.loading = true;
        });
    }
  }
}

żeby można było ją odczytać w innym miejscu.

follow().add(...).then((result) => {
  console.log(result)
});

lub przez async / await

const result = await follow().add(...);

console.log(result);

I tutaj tylko wspomnę, bo nie jestem pewien, czy wiesz, ale tej zmiennej hash nie używasz, a wartości url i data mają w tym przykładzie wartość undefined.

chomikowski napisał(a):

function follow() {
    return {
        add(hash) {
            fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: data,
            })
            .then(...)
            .then(...)
            .finally(...) 
        },
    }
}

@Xarviel: dzieki zaraz sprawdze to bo z tym await i async sprawdzalem ale jest error i zobacze z tym return.

@Xarviel: zajebiście po małej modyfikacji działa idealnie, musialem dodac return fetch(url, i potem w then return responseData

function follow() {
    return {
        add(hash) {
            return fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: data,
            })
            .then((response) => response.json())
            .then((responseData) => {
                if (responseData.error == 1) {
                    console.log(responseData.message)
                } else {
                    return responseData
                }
            })
            .finally((data) => {
                this.loading = false
            })
        },
    }
}

i potem mam te informacje tutaj

follow().add(...).then((result) => {
  console.log(result)
});