利用reduce和Promise发送顺序队列请求。

imageimage
循环上面的数组进行数据请求,每次发送该数组中的一个元素(即第一次发送0的四个对象,成功后发送1的四个对象,以此类推,当发送完8后,停止));
问题是:应该发送9次就好了,现在发送了33次。不知道什么原因。

回复
阅读 2.5k
3 个回答
var datas = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [13]
]

// 模拟ajax请求
function upload (json) {
  return new Promise(resolve => {
    console.log('sendData: ', json)
    setTimeout(() => {
      resolve(json)
      console.log('receiveData: ', json)
    }, 2000)
  })
}

datas.reduce(async (prev, cur, i) => {
  let data = JSON.stringify(datas[i])
  await prev
  return upload(data) // this.$api.post封装成一个promise,前面一定要加return
}, Promise.resolve())

// sendData:  [1,2,3,4]
// 2s后
// receiveData:  [1,2,3,4]
// sendData:  [5,6,7,8]
// 4s后
// receiveData:  [5,6,7,8]
// sendData:  [9,10,11,12]
// 6s后
// receiveData:  [9,10,11,12]
// sendData:  [13]
// 8s后
// receiveData:  [13]

问题:

  1. this.$api.post封装成一个promise,前面一定要加return,不加return所有的请求一起都发出去了,就没有你说的前一个发送成功之后再发送后一个;
  2. result遍历了一遍,result[i]也是一个数组,你又reduce了一遍,你请求发送的是数组中每个元素的每个元素,一共8*4+1=33个请求。我觉得直接在result上应用reduce就行了,为什么要在每个子元素上应用reduce。

我自己封了一个函数专门处理这种梯队请求,总共2个参数,一个参数是要循环的数组,一个参数是要处理的异步操作。

function Promise_reduce(arr, fn) {
    return arr.reduce((promise, item) => promise.then(res => fn(item).then(r => (res.push(r), res))),
    Promise.resolve([]))
}

你的需求就可以这样写:

// 假如你的数组是这样的
var datas = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [13]
]

// 这个是ajax请求的方法
function ajaxFn(item) {
    return new Promise((resolve, reject) => {
        this.$api.post("xxx", JSON.stringify(item), (response) => {
            if (response.status == 200) {
                if (response.data.success) {
                    resolve('数据插入成功');
                } else {
                    resolve('数据插入失败')
                }
            } else {
                resolve('接口请求失败')
            }
        })
    })
}

Promise_reduce(datas, ajaxFn).then((res) => {
    console.log(JSON.stringify(res))
    // [res1, res2, res3, res4] 分别对应每个请求
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏