javascript - 如何使用 Promise 等待异步 API 调用

Question

我正在创建一个API，当GET时，对新闻API进行一系列调用，新闻文章标题被提取到一个巨大的字符串中，并且该字符串被处理成一个对象以传递到前面的词云-结尾。到目前为止，我已经能够使用 underscore 的 _.after 和 request-promise 来让我的应用程序等到所有 API 调用完成后再调用 processWordBank() ，这需要巨大的绳子并将其清理成一个物体。但是，一旦调用processWordBank()，我就不明白程序的流程在哪里。理想情况下，processWordBank() 将 obj 返回到路由器中的 cloudObj，以便可以将 obj 传递给 res.json() 并作为响应吐出。我相信我对 _.after 的使用让我陷入了奇怪的境地，但这是我能够在继续执行下一个所需操作之前完成异步调用的唯一方法。有什么建议吗？

(我尝试省略所有不必要的代码，但如果这还不够，请告诉我)

// includes...
var sourceString = ""
// router
export default ({ config }) => {
  let news = Router()
  news.get('/', function(req, res){
    var cloudObj = getSources()
        res.json({ cloudObj })
  })
  return news
}

// create list of words (sourceString) by pulling news data from various sources
function getSources() {
    return getNewsApi()

}
// NEWS API
// GET top 10 news article titles from News API (news sources are determined by the values of newsApiSource array)
function getNewsApi() {
  var finished = _.after(newsApiSource.length, processWordBank)
  for(var i = 0; i < newsApiSource.length; i++) {
    let options = {
      uri: 'https://newsapi.org/v1/articles?source=' + newsApiSource[i] + '&sortBy=' + rank + '&apiKey=' + apiKey,
      json: true
    }
    rp(options)
    .then(function (res) {
      let articles = res.articles // grab article objects from the response
      let articleTitles = " " + _.pluck(articles, 'title') // extract title of each news article
      sourceString += " " + articleTitles // add all titles to the word bank
      finished() // this async task has finished
    })
    .catch(function (err) {
      console.log(err)
    })
    }
}

// analyse word bank for patterns/trends
function processWordBank(){
  var sourceArray = refineSource(sourceString)
  sourceArray = combineCommon(sourceArray)
  sourceArray = getWordFreq(sourceArray)
  var obj = sortToObject(sourceArray[0], sourceArray[1])
  console.log(obj)
  return obj
}

Answer 1

异步流程中的一个大问题是您使用共享变量sourceString来处理结果。当您多次调用 getNewsApi() 时，您的结果是不可预测的，并且不会始终相同，因为异步调用的执行顺序没有预定义。不仅如此，而且您永远不会重置它，因此所有后续调用也将包含先前调用的结果。避免在异步调用中修改共享变量，而是直接使用结果。

I've been able to use underscore's _.after and request-promise to make my app wait till all API calls have completed before calling processWordBank()

尽管可以使用 _.after，但这可以通过 Promise 很好地完成，并且由于您已经为请求使用 Promise，因此只需从以下位置收集结果即可他们。因此，因为您想等到所有 API 调用完成，您可以使用 Promise.all它返回一个 promise ，一旦所有 promise 都得到履行，该 promise 就会解析为所有 promise 值的数组。让我们看一个非常简单的例子来了解如何Promise.all作品:

// Promise.resolve() creates a promise that is fulfilled with the given value
const p1 = Promise.resolve('a promise')
// A promise that completes after 1 second
const p2 = new Promise(resolve => setTimeout(() => resolve('after 1 second'), 1000))
const p3 = Promise.resolve('hello').then(s => s + ' world')
const promises = [p1, p2, p3]

console.log('Waiting for all promises')
Promise.all(promises).then(results => console.log('All promises finished', results))
console.log('Promise.all does not block execution')

现在我们可以修改 getNewsApi() 以使用 Promise.all。提供给 Promise.all 的 Promise 数组是您在循环中执行的所有 API 请求。这将使用 Array.protoype.map 创建。而且我们可以直接使用该数组，而不是从 _.pluck 返回的数组中创建字符串，因此您不需要在最后将字符串解析回数组。

function getNewsApi() {
  // Each element is a request promise
  const apiCalls = newsApiSource.map(function (source) {
    let options = {
      uri: 'https://newsapi.org/v1/articles?source=' + source + '&sortBy=' + rank + '&apiKey=' + apiKey,
      json: true
    }
    return rp(options)
      .then(function (res) {
        let articles = res.articles
        let articleTitles = _.pluck(articles, 'title')
        // The promise is fulfilled with the articleTitles
        return articleTitles
      })
      .catch(function (err) {
        console.log(err)
      })
  })
  // Return the promise that is fulfilled with all request values
  return Promise.all(apiCalls)
}

然后我们需要使用路由器中的值。我们知道从 getNewsApi() 返回的 Promise 会满足所有请求的数组，这些请求本身会返回一个文章数组。这是一个二维数组，但您可能需要一个包含 processWordBank() 函数的所有文章的一维数组，因此我们可以先将其展平。

export default ({ config }) => {
  let news = Router()
  new.get('/', (req, res) => {
    const cloudObj = getSources()
    cloudObj.then(function (apiResponses) {
      // Flatten the array
      // From: [['source1article1', 'source1article2'], ['source2article1'], ...]
      // To: ['source1article1', 'source1article2', 'source2article1', ...]
      const articles = [].concat.apply([], apiResponses)
      // Pass the articles as parameter
      const processedArticles = processWordBank(articles)
      // Respond with the processed object
      res.json({ processedArticles })
    })
  })
}

最后，需要将 processWordBank() 更改为使用输入参数，而不是使用共享变量。不再需要 refineSource，因为您已经传递了一个数组(除非您对其进行了一些其他修改)。

function processWordBank(articles) {
  let sourceArray = combineCommon(articles)
  sourceArray = getWordFreq(sourceArray)
  var obj = sortToObject(sourceArray[0], sourceArray[1])
  console.log(obj)
  return obj
}

<小时/>

作为奖励，可以使用一些 ES6 features 来清理路由器和 getNewsApi() (没有上面片段中的评论):

export default ({ config }) => {
  const news = Router()
  new.get('/', (req, res) => {
    getSources().then(apiResponses => {
      const articles = [].concat(...apiResponses)
      const processedArticles = processWordBank(articles)
      res.json({ processedArticles })
    })
  })
}

function getNewsApi() {
  const apiCalls = newsApiSource.map(source => {
    const options = {
      uri: `https://newsapi.org/v1/articles?source=${source}&sortBy=${rank}&apiKey=${apiKey}`,
      json: true
    }
    return rp(options)
      .then(res => _.pluck(res.articles, 'title'))
      .catch(err => console.log(err))
  })
  return Promise.all(apiCalls)
}