javascript - promise 中的延迟函数 JavaScript 代码解释

Question

我不是在问如何编写延迟函数，因为该问题已得到解答，我只是不理解代码本身。我不明白为什么我们需要一个函数返回另一个函数？我们如何获取数据
我已经用我的评论注释了代码。如果您在控制台中运行它，它应该可以工作。我只是在寻找新手解释为什么我们需要这里的柯里化(Currying)语法。

// a function
function delay(duration) {
  // why do we return here !! 
  // this args are the data.json() 
  // but how do we have access to it?? I don't see anywhere in the code that we are calling delay(data => data.json())
  // I know that .then calls the function for you with data.json() but that only if the function doesn't have a paramets for example doing just then(delay) but we are using a paramaeter here which is the 1000
  return function(...args){
    // so we return a new promise that resolves after sometime, this make sense.
    // but I don't understand all these returns.
    return new Promise(function(resolve, reject){
      setTimeout(function(){
        resolve(...args);
      }, duration)
    });
  };
}


const endpoint = 'https://pokeapi.co/api/v2/pokemon/ditto/'
const prom1 = fetch(endpoint)
              .then(data => data.json())
              .then(delay(2000))
              .then(console.log)

Answer 1

...why we need to have a function returning another function?

所以当你这样做的时候

.then(delay(2000))

...它调用 delay(2000)，获取将添加该延迟的函数，并将其添加到 promise 链中。 稍后，当链稳定下来时，将使用参数调用该函数 then 回调接收(实现值)，它作为其 中的唯一条目接收...args 剩余参数。然后它将等待 duration 毫秒，然后用该实现值实现它的 promise 并允许链继续。

如果 delay 直接返回其 promise ，则该 promise 将转到 then 并且超时将提前开始(在实现到达链中的那个点之前)。它还会“吃掉”通过链传递的履行值(value)，因为在履行其 promise 时它不会使用该值(value)。

如果你刚刚:

function delay(duration, ...args) {
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve(...args);
    }, duration)
  });
}

那么你必须像这样使用它:

.then(delay.bind(null, 2000))

这更尴尬(并且仍然创建并提供一个函数，因为那是 bind 所做的)。

---

旁注:delay 实现没有理由使用 rest 和 spread。只有 resolve 的第一个参数被使用(任何其他参数都被完全忽略)，而 then 处理程序只接收一个参数。所以它可能是:

function delay(duration) {
  return function(fulfillmentValue){
    return new Promise(function(resolve, reject){
      setTimeout(function(){
        resolve(fulfillmentValue);
      }, duration)
    });
  };
}

...尽管我可能会为 delay 创建的所有三个函数使用箭头函数。