ajaxStart和ajaxStop相当于获取API

问题描述：

我试图将我的API调用从使用jQuery ajax迁移到使用Fetch API。ajaxStart和ajaxStop相当于获取API

我正在使用jQuery ajaxStart和ajaxStop在服务器调用期间显示加载微调器。

我正在运行多个并行服务器请求，我希望微调控制器在第一个请求开始时启动，并在最后一个请求解决时停止。

这是非常直接与jQuery的前进。但是，我找不到使用抓取API的类似技术。任何想法？

答

您可以使用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

ajaxStart和ajaxStop相当于获取API

相关推荐