关于javascript:ajaxStart和ajaxStop相当于fetch API

ajaxStart and ajaxStop equivalent with fetch API

我正在尝试将我的API调用从使用jquery-ajax迁移到使用fetch-api。

在服务器调用期间,我使用jquery ajaxstart和ajaxstop显示加载微调器。

我正在运行几个并行服务器请求,我希望自旋体在第一个请求启动时启动,在最后一个请求解决时停止。

jquery非常直截了当。但是,我找不到使用fetch API的类似技术。有什么想法吗?


您可以使用Promise通知何时调用和完成fetch

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数据


在调用fetch之前启动spinner并在finally中停止它。

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);