AjaxStart und AjaxStop Äquivalent mit Fetch-API

Question

Ich versuche, meine API-Aufrufe aus der Verwendung von jQuery Ajax auf die Verwendung der Fetch-API zu migrieren.

Ich verwendete jQuery ajaxStart und ajaxStop, um einen Lade-Spinner während Serveraufrufen anzuzeigen.

Ich führe mehrere parallele Serveranfragen aus, ich möchte, dass der Spinner startet, wenn die erste Anfrage beginnt und stoppt, wenn die letzte Anfrage erledigt ist.

Es war ziemlich direkt mit jQuery. Ich kann jedoch keine ähnliche Technik mit der Abruf-API finden. Irgendwelche Ideen?

Answer 1

können Sie Promise verwenden zu benachrichtigen, wenn fetch genannt wird und abgeschlossen

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/

---

Siehe auch Fetch: POST json data