如何模拟我的 api 调用函数的延迟？

Question

我有一个功能可以通过 api post 请求更新用户。后端还没有完成。因此该函数将始终 return 出错。为了测试加载和错误状态，我想在 returning 结果之前临时添加一个假延迟。怎么做？这是函数：

const updateProfile = async (form) => {
  try {
    const res = await api.post("/update-profile", form);
    return res;
  } catch (err) {
    throw new Error("error.unknown");
  }
};

写这个没用：

const updateProfile = async (form) => {
  try {
    let fakeCallDone = false
    setTimeout(()=> fakeCallDone = true, 2000)
    const res = await api.post("/update-profile", form);
    fakeCallDone && res;
  } catch (err) {
    throw new Error("error.unknown");
  }
};

Answer 1

您可以创建一个简单的睡眠函数。

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms));

然后用like

 await sleep(2000);

Answer 2

您可以同时 return 一个新的承诺（直到后端准备就绪）：

const updateProfile = async () => {
  try {
    // const res = await api.post("/update-profile", form);
    // return res;
    return new Promise((res, rej) => {
     setTimeout(() => res('response'), 2000)
    })
  } catch (err) {
    throw new Error("error.unknown");
  }
};

updateProfile().then(console.log)

Answer 3

问题出在这里：

setTimeout(()=> fakeCallDone = true, 2000)

会移动到Web API然后继续执行下一行代码

[解决方法]

const updateProfile = async (form) => {
  try {
   var res = api.post("/update-profile", form); // this async code will move on `web api`. When it's done will move on to queue.
   await delay(2000); // You mock a delay here
   return await res; // Resolve value from `res` promise. 
  } catch (err) {
    throw new Error("error.unknown");
  }
};

delay() 方法如下所示：

const delay= ms => new Promise(resolve => setTimeout(resolve, ms));

注意：您应该获得有关 event loop 的更多详细信息才能了解

js 的工作原理：call stack, web API, queue, event loop
Javascript 中的异步编程。

如何模拟我的 api 调用函数的延迟？

How to mock a delay in my api call function?

javascript

asynchronous

settimeout