如何用循环的方式提交表单数据

Question

假如我有一个数组arr[1,2,3,4,5],
我需要提交一个表单form
内容就是 form:{id:1,status:1},以此类推直到循环完数组，但是我想等上一次提交完后再接着提交下一次的表单

Answer 1

可以使用for await...of但是有兼容性问题。
https://developer.mozilla.org...

还可以使用for循环

const forLoop = async _ => {
  console.log('start');

  for (let index = 0; index < fruitsToGet.length; index ++) {
    const fruit = fruitsToGet[index];
    const numFruit = await getNumFruit(fruit);
    console.log(numFruit);
  }
  console.log('End')
}

Answer 2

async/await

Answer 3

两种方法，第一是上面兄弟提到的async、await，另一种就是用递归

const arr = [1,2,3,4,5]
let index = 0

function sendRequest(param){
    new Axios({
        method: 'post',
        url: '/user/12345',
        data: param
    }).then(()=>{
        if(i++<arr.length-1) sendRequest({form:{id:arr[i],status:arr[i]}})
    })
}

sendRequest({form:{id:1,status:1}})

Answer 4

巧用reduce也是一个解决方法。

// 模拟一个异步函数 返回的是promise
let asyncfunc = (form) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(JSON.stringify(form))
            resolve(form)
        }, 1000)
    })
}

let arr = [1,2,3,4,5]
arr.reduce((t, currentValue) => {
    t = t.then(res => asyncfunc({id: currentValue, status: currentValue}))
    return t
}, Promise.resolve())