javascript - 将 Promise 的返回值传递给许多函数的最佳方法

Question

让一个函数返回一个 promise :

async function foo() {
  return await new Promise((res, rej) => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(res => res.json())
          .then(data => res(data))
          .catch(err => rej(err))
  })
}

为了重用返回的数据，我可以这样想:

(async function() {
    data = await foo().catch(err => console.log('err: ', err))
    fnc1(data)
    fnc2(data)
    ...
    fncn(data)
})();

或者类似的东西:

foo().then(data => {
                fnc1(data)
                fnc2(data)
                ...
                fncn(data)
              }
        )

因此，我总是必须返回代码中找到获取 Promise 返回的数据的函数或回调，并将我想要的任何新函数包含到适当的 block 中。

我想知道是否有更聪明的方法可以在 javascript 中实现相同的结果。我知道像下面这样的东西是行不通的:

var dataFromPromise
foo().then(data => dataFromPromise = data)
console.log(dataFromPromise) //undefined if called before foo runs

Answer 1

 不要将 promise 包裹在 promise 内

fetch 已经返回一个 Promise，因此无需将其包装到另一个 Promise 中。而不是:

async function foo() {
  return await new Promise((res, rej) => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(res => res.json())
          .then(data => res(data))
  })
}

做:

function foo(){
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(data => res(data))
  .catch(err => rej(err))
}

 重用 promise

一旦你有了一个 Promise，无论它是待处理、拒绝还是履行，你都可以一次又一次地重用它，如果它得到解决，它总是会给出返回值。所以代替:

foo().then(data => {
    fnc1(data)
    fnc2(data)
    ...
    fncn(data)
  }
)

你可以这样做:

const myPromise = foo();

myPromise.then(data => fnc1(data));

// some code

myPromise.then(data => fnc2(data));

// more code

myPromise.then(data => fnc3(data));

并且您可以确定 fnc1 和其他人在 promise 解决之前不会接到电话。

现在，这确实很好，但并不能解决所有相关问题，而且这种方法仍然可能会发生很多不好的事情。要解决处理和重用 promise 的所有可能方法对于 SO 答案来说太宽泛了。

关于这个主题的一个非常好的资源是:

http://2ality.com/2017/08/promise-callback-data-flow.html