ajaxStart and ajaxStop equivalent with fetch API
我正在尝试将我的API调用从使用jquery-ajax迁移到使用fetch-api。
在服务器调用期间,我使用jquery ajaxstart和ajaxstop显示加载微调器。
我正在运行几个并行服务器请求,我希望自旋体在第一个请求启动时启动,在最后一个请求解决时停止。
jquery非常直截了当。但是,我找不到使用fetch API的类似技术。有什么想法吗?
您可以使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 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 }); }); |
jspiddle https://jsfiddle.net/abpbah4/18/
另请参见fetch:post-json数据
在调用
1 2 3 4 5 | state.showSpinner = true; Promise.all([fetch(url1), fetch(url2)]) .then(success => console.log(success)) .catch(error => console.log(error) .finally(() => state.showSpinner = false); |
号