将 Promise 中的解析函数分配给变量

Question

有一段我似乎无法理解的代码。有一个函数首先声明为空：

let dCredentials = (credentials: any) => {}

然后这个变量在稍后被调用的函数中重新签名：

  return new Promise((resolve, _) => (dispatchCredentials = resolve))

第二个代码是做什么的？有人在承诺中使用 .then 后它会返回任何内容吗？

Answer 1

如果您在承诺之外获得对resolve 函数的引用，那么您可以在任何时候使用您想要的任何值手动解决它。

一个简单的示例 - 仅用于演示目的：

//create a variable to use for the resolve function
let outsideResolve;

//make a promise
const p = new Promise((resolve) => outsideResolve = resolve);

//attach callbacks
p
  .then(value => value.toUpperCase())
  .then(value => value + "!")
  .then(value => console.log("Final value:", value));

//add a click listener that will be invoked at any point in time
document.getElementById("click_me").addEventListener("click", () => {
  const input = document.getElementById("fill_me");
  
  //resolve the promise once clicked
  outsideResolve(input.value);
})

<input type="text" id="fill_me"/>

<button id="click_me">resolve with value</button>

您仍然可以正常使用 Promise，但您可以更好地控制何时以及如何解决它。

如果您知道什么您想要执行的操作，但不能说何时需要应用它们，因为数据（以及解决方案）将在以后出现，这会很有帮助.

此外，您可能必须添加越来越多的 .then 调用，直到某些条件导致 Promise 解决。尝试输入“hello”->添加到句子->输入“world”->添加到句子->构建句子

//create a variable to use for the resolve function
let outsideResolve;

//make a promise
let p = new Promise((resolve) => outsideResolve = resolve);

//add a click listener that will be invoked at any point in time
document.getElementById("add_me").addEventListener("click", () => {
  const input = document.getElementById("fill_me");
  
  const inputValue = document.getElementById("fill_me").value;
  
  p = p.then(value => `${value} ${inputValue}`);
  console.log(`"${inputValue}" added.`)
  
  input.value = "";
})

//add a click listener that will be invoked at any point in time
document.getElementById("click_me").addEventListener("click", () => {
  //attach final callbacks
  p
    .then(value => value.toUpperCase())
    .then(value => value + "!")
    .then(value => console.log("Final value:", value));

  //resolve the promise once clicked
  outsideResolve("start resolving");
})

<input type="text" id="fill_me"/>

<button id="add_me">add to sentence</button>
<button id="click_me">build sentence</button>