Axios 批处理 - 小记

2019-05-30

Axios 批处理 - 小记

老板突然突发奇想让我做一个啥商家批量导单的网页, Excuse me ! 我早就想尝试一下前端做一些并发的请求咯.

回调式处理

第一次做批量处理, 不敢太浪, 只敢做一下回调式慢慢处理, 回调嘛也就是监听一个任务做完了以后,我们再给他安排做下一个任务, 最好就是自己搞完了在调用自己

let index = 0;
function callback(){
    console.log(++index)
    // ...
    setTimeout(callback, 500)
}

在Axios里面思路也是一样的

function createOrder(index){
    // 完成监听要写在这
    if(!data[index]) return false
    axios.get('/createOrder',data[index]).then((res)=>{
        // ... 可能会有更多的处理
        successArr.push(index)
        createOrder(++index)
    }).catch((res)=>{
        failArr.push({index, ...res})
        createOrder(++index)
    })
}

虽然异步让我门代码增加了需要, 但是不可否认, 异步带来的体验绝对好过同步太多. 这种回调式的处理, 非常适合那些任务量不大,但是服务器带宽比较底下的任务.
#

并发处理

虽然回调这样的处理安全性应该来说真的很棒, 但是对于时间销耗是真的… 慢的要命, 这个时候我们就可以去考虑一下并发请求了.

很简单的, axios本身就是无阻塞的异步函数, 只要我们多写几个请求挨着下去, 这样就不会等待上一个请求放回了才请求下一个

for(let index in data){
    axios.get('/createOrder',data[index]).then((res)=>{
        console.log(index, '=>', res)
    }
}

这种处理, 如果不考虑结果的请求, 是完全没问题的, 上面这种函数, 而且还是异步的. 完全就是闭包啊, 最好输出的index全部都是data.length吧.
这个时候我们应该怎么办呢 ?

data.map(function (item,index){
    // 我们知道每一个函数都会有他的作用域
    // 所以我们将每一次请求都放在一个函数里面就不会有闭包的问题产生咯
     axios.get('/createOrder',item).then((res)=>{
        console.log(index, '=>', res)
    }
})

我们知道, 后台服务器这东西是最不靠谱的玩意儿, 所以我们怎么才能知道这些请求都做完了呢? 这是一个问题. 还好我们还有promise.all
#
翻阅一些axios的文档, 我们可以清楚的看到可以把axios的请求放到axios.all里面, 这样我们就可以监听并处理他全部的事件了

// 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

这样来看看, 我们的需求就非常简单了

let requests data.map((item)=>{
    return axios.get('/createOrder',data)
})
axios.all(requests).then((res)=>{
    // 上面那个 axios.spread是把放回的结果拆开给我们处理
    // 我这现在放回的res是一个所有返回的数组
    console.log('success=>',res.length)
}).catch(res=>{
    console.log('fail=>',res.length)
}) // 这个错误监听我还不知道有没有用呢

Oj8k, 思路理下来, 其实批处理完全不难, 感谢axios, 感谢各位前端大牛给我们造的那么多轮子,感谢每一位在前端路上前进的人们, 让我门一起加油努力把.