ajaxStart i ajaxStop equivalent with fetch API

Question

Próbuję przeprowadzić migrację moich wywołań API za pomocą jQuery ajax do korzystania z interfejsu Fetch API.

Użyłem jQuery ajaxStart i ajaxStop, aby wyświetlać spinner ładujący podczas wywołań serwera.

Używam kilku równoległych żądań serwera, chcę, aby spinner zaczął się, gdy pierwsze żądanie się uruchomi i zatrzyma, gdy ostatnie żądanie zostanie rozliczone.

To było całkiem proste z jQuery. Jednak nie mogę znaleźć podobnej techniki za pomocą interfejsu API pobierania. Jakieś pomysły?

Answer 1

Można użyć Promise powiadomić kiedy fetch nazywa i zakończone

var params = { 
    a: 1, 
    b: 2 
}; 

var data = new FormData(); 
data.append("json", JSON.stringify(params)); 

var currentRequest = new Request("/echo/json/", { 
    method: "POST", 
    body: data 
}); 

var start, complete; 
var fetchStart = new Promise(function(_start) { 
    start = _start; 
}) 

var fetchComplete = new Promise(function(_complete) { 
    complete = _complete; 
}); 
// do stuff when `fetch` is called 
fetchStart.then(function(startData) { 
    console.log(startData) 
}); 
// do stuff when `fetch` completes 
fetchComplete.then(function(completeData) { 
    console.log(completeData) 
}); 

var request = fetch(currentRequest); 

[request, start({ 
    "fetchStarted": currentRequest 
})].shift() 
.then(function(res) { 
    if (res.ok) { 
    // resolve `fetchComplete` `Promise` when `fetch` completes 
    complete({ 
     "fetchCompleted": res 
    }) 
    }; 
    return res.json(); 
}) 
.then(function(data) { 
    document.body.textContent = JSON.stringify(data) 
}) 
.catch(function(err) { 
    // if error, pass error to `fetchComplete` 
    complete({ 
    "fetchCompleted": res, 
    "error": err 
    }); 
}); 

jsfiddle https://jsfiddle.net/abbpbah4/18/

---

Patrz także Fetch: POST json data