javascript - 用 aych 循环和 Promise 包装函数

Question

我是 Javascript 新手，但仍然专注于编写 Promise。

function addToList(data) {
    conversationList = data.Body.Conversations
    console.log(conversationList)
    for (i=0; i<conversationList.length; i++) {
        fullInbox.push(conversationList[i])
    }
    console.log(fullInbox.length)
}

var fullInbox = []
var maxLenReturn = 200
var offset = 0
function fetchData(offset){
    fetch(asynchCall)
    .then(response=>{return response.json()})
    .then(data=>{
        var fullLength = data.Body.TotalConversationsInView
        console.log(fullLength)
        addToList(data)
        if (offset < fullLength-maxLenReturn) {
            offset+= maxLenReturn
            fetchData(offset)
        }
    })
}

fetchData(offset) 
// trying to make something like this work
.then( .... console.log(fullInbox.length))

我在 fetchData 函数内有一个循环，并希望将其包装在一个 Promise 中，以便在完成后，我可以打印出 fullInbox

var promise1 = new Promise(function(resolve, reject) {
  var fullInbox = []
  var maxLenReturn = 200
  var offset = 0
  fetchData(offset);
  resolve(fullInbox)
});

promise1.then(function(value) {
  console.log('promise resolved')
  console.log(value);
});

我认为我需要 fetchData 中的 resolve 但不确定如何编写它，以便它在解析之前循环遍历所有内容。

Answer 1

从我所看到的代码来看，您的 addToList 函数是同步的，因此它不需要对 Promise 执行任何操作。但是下次调用 fetchData 时，您需要处理该 promise 。所以，像这样的事情会起作用:

function fetchData(offset){
    return fetch(asynchCall)
    .then(response=>{return response.json()})
    .then(data=>{
        var fullLength = data.Body.TotalConversationsInView
        console.log(fullLength)
        addToList(data)
        let promise;
        if (offset < fullLength-maxLenReturn) {
            offset+= maxLenReturn
            promise = fetchData(offset)
        } else {
            promise = Promise.resolve();
        }
        return promise;
    })
}

如果您想使用 async/await style syntax ，事情变得更容易阅读:

async function fetchData(offset){
    let response = await fetch(asynchCall)
    let data = await response.json();
    let fullLength = data.Body.TotalConversationsInView
    console.log(fullLength)
    addToList(data)
    if (offset < fullLength-maxLenReturn) {
      offset+= maxLenReturn
      await fetchData(offset)
    }
}

当前所有主要浏览器都支持异步/等待，并且您可以为旧版浏览器进行填充。由于其语法更清晰，我强烈推荐使用它。它将使您免于编写错误。

<小时/>

所以，这是一个较短的版本，可以做您需要它做的事情。它使用异步/等待。每次调用 fetchData 都会从一直传递到末尾的偏移量返回收件箱项目。使用默认参数可以避免使用全局变量。

async function fetchData(offset = 0, maxLenReturn = 200) {
    let response = await fetch(asyncCall)
    let data = await response.json();
    let inbox = data.Body.Conversations;
    let fullLength = data.Body.TotalConversationsInView
    if (offset < fullLength-maxLenReturn) {
      offset+= maxLenReturn
      inbox.push(...await fetchData(offset))
    }
    return inbox;
}

let fullInbox = fetchData()