我最近不得不创建一个没有后端端点的用户界面（ui）。重点是使 ui 尽可能具有响应性，以便用户可以知道操作何时正在进行。
这主要意味着当进行 ajax 调用时，ui 应进行指示，并在调用完成时进行相应更新。
为了帮助 ui 的开发，我创建了一个函数来模拟 ajax 调用。该功能能够：
接受延迟（以毫秒为单位）来模拟进行实际 ajax 调用的延迟接受 ajax 调用失败时模拟失败的概率返回提供的有效负载
typescript 代码如下（请参阅带有文档字符串的完整代码示例的要点）：
export async function delay( timeout: number, probability?: number, result?: t): promise { return new promise((resolve, reject) => { settimeout(() => { if (!probability || probability 1) { resolve(result); return; } const hit = math.random(); if (hit < probability) { resolve(result); } else { reject( `placeholder rejection (${math.round( hit * 100 )}%) - this should not appear in production` ); } }, timeout); });}
要使用此功能：
async function handlebuttonclick() { // update the ui to show a loading indicator. try { // highlight-start // make the call take 3 seconds, with a 10% chance of failure, // and return an array of users. const result = await delay(3000, 0.9, [ { email: 'user1@example.com', username: 'user 1', }, ]); // highlight-end // update the ui when the call completes succesfully. } catch (err: any) { // update the ui when the call fails. }}
相同函数的 javascript 版本如下：
export async function delay(timeout, probability, result) { return new Promise((resolve, reject) => { setTimeout(() => { if ( !probability || typeof probability !== 'number' || probability 1 ) { resolve(result); return; } const hit = Math.random(); console.log(hit, probability); if (hit < probability) { resolve(result); } else { reject( `Placeholder rejection (${Math.round( hit * 100 )}%) - this should NOT appear in production` ); } }, timeout); });}
这篇文章首次发表于 cheehow.dev
以上就是AJAX 调用的占位符函数的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490818.html
微信扫一扫 
支付宝扫一扫 
