vue如何循环请求一个接口

 更新时间:2023年07月19日 16:59:18   作者:迷彩湃  
这篇文章主要介绍了vue如何循环请求一个接口问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue循环请求一个接口

最近在做一个项目时需要批量生成某些数据,这里就用到了循环请求一个接口,也是第一次使用这种方式。

可以利用 forEach 循环进行请求一个接口。

是根据时间段去批量生成的。

 packageSubmit(){
        const than=this
        than.timeSection.forEach((item,index)=>{ //循环请求的数据
          console.log(item)
          than.packageDatil.forEach((item2,i)=>{ // 循环请求的数据
            allSubmit({stationid:this.stationid,packageid:this.fromData.package, //接口携带上参数 这里最好利用计算属性处理一下,不然显得很长
          PlanDate:item,PlanTimeStart:item2.plantime,PlanTimeend: item2.timespan+item2.plantime-0,PlanNum: item2.plannum}).then(res=>{
            console.log(res)
            if(res.data.success==1){
              Toast('处理成功~')
              setTimeout(() => {
                //  this.$router.push({name:'schedul_set'})
              }, 0);
            }else if(res.data.success==0){
                Toast(res.data.msg)
            }
          }).catch(err=>{
            console.log('处理失败')
          })
          })

vue循环请求同一个接口,等接口返回数据之后在进行下次循环

async 方法名() {
      for (let i = 0; i < this.mlList.length; i++) {
        for (let j = 0; j < this.mlList[i].child.length; j++) {
          const res = await postapplicationJson(
            {
              id: this.$route.params.id,
              catalogID: value,
              parentID: this.mlList[i].id,
              childID: this.mlList[i].child[j].id
            },
            '/goods/across/syncCatalogAndGoods'
          )
          if (res.code == 1001) {
            this.loading = false
            this.$set(this.mlList[i].child[j], 'msg', '克隆成功')
          } else {
            this.$set(this.mlList[i].child[j], 'msg', res.msg)
            this.loading = false
          }
        }
      }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue路由模块化配置的完整步骤

    Vue路由模块化配置的完整步骤

    这篇文章主要给大家介绍了关于Vue路由模块化配置的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Vue2.0学习系列之项目上线的方法步骤(图文)

    Vue2.0学习系列之项目上线的方法步骤(图文)

    这篇文章主要介绍了Vue2.0学习系列之项目上线的方法步骤(图文),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue项目登录页面实现记住用户名和密码的示例代码

    vue项目登录页面实现记住用户名和密码的示例代码

    本文主要介绍了vue项目登录页面实现记住用户名和密码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue实现右上角时间显示实时刷新

    vue实现右上角时间显示实时刷新

    这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    这篇文章主要介绍了详解如何使用vue-cli脚手架搭建Vue.js项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue lazyload图片懒加载实例详解

    Vue lazyload图片懒加载实例详解

    本文通过实例代码给大家介绍了Vue lazyload图片懒加载的相关知识,通过导入配置等操作src/main.jswenj ,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-12-12
  • vue项目中按需引入element-ui的正确实现方法

    vue项目中按需引入element-ui的正确实现方法

    这篇文章主要介绍了vue项目中按需引入element-ui的正确实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue+elementui 表格分页限制最大页码数的操作代码

    vue+elementui 表格分页限制最大页码数的操作代码

    这篇文章主要介绍了vue+elementui 表格分页限制最大页码数的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • vue 路由子组件created和mounted不起作用的解决方法

    vue 路由子组件created和mounted不起作用的解决方法

    今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue简单实现一个虚拟列表的示例代码

    vue简单实现一个虚拟列表的示例代码

    虚拟列表只渲染当前可视区域的列表,并不会将所有的数据渲染,本文主要介绍了vue简单实现一个虚拟列表的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03

最新评论