ajaxStart和ajaxStop相當於獲取API

Question

我試圖將我的API調用從使用jQuery ajax遷移到使用Fetch API。

我正在使用jQuery ajaxStart和ajaxStop在服務器調用期間顯示加載微調器。

我正在運行多個並行服務器請求，我希望微調控制器在第一個請求開始時啓動，並在最後一個請求解決時停止。

這是非常直接與jQuery的前進。但是，我找不到使用抓取API的類似技術。 任何想法？

Answer 1

您可以使用Promise通知時fetch被調用，完成

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/

---

也見Fetch: POST json data