PHP前端开发

AJAX 调用的占位符函数

百变鹏仔 2个月前 (10-14) #JavaScript
文章标签 函数

我最近不得不创建一个没有后端端点的用户界面(ui)。重点是使 ui 尽可能具有响应性,以便用户可以知道操作何时正在进行。

这主要意味着当进行 ajax 调用时,ui 应进行指示,并在调用完成时进行相应更新。

为了帮助 ui 的开发,我创建了一个函数来模拟 ajax 调用。该功能能够:

typescript 代码如下(请参阅带有文档字符串的完整代码示例的要点):

export async function delay<t>(  timeout: number,  probability?: number,  result?: t): promise<t> {  return new promise<t>((resolve, reject) =&gt; {    settimeout(() =&gt; {      if (!probability || probability  1) {        resolve(result);        return;      }      const hit = math.random();      if (hit <p>要使用此功能:<br></p><pre class="brush:php;toolbar:false">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) =&gt; {    setTimeout(() =&gt; {      if (        !probability ||        typeof probability !== 'number' ||        probability  1      ) {        resolve(result);        return;      }      const hit = Math.random();      console.log(hit, probability);      if (hit <p><em>这篇文章首次发表于 cheehow.dev</em></p>