首页 > 其他分享 >在vue2中按顺序调用多个接口,接收返回数据

在vue2中按顺序调用多个接口,接收返回数据

时间:2024-04-22 14:22:06浏览次数:20  
标签:arr resolve apiName err res 顺序调用 接口 vue2

最近有一个点一个按钮调用多个接口,并且按顺序串行调用,根据后端返回的逻辑,区分接口之间的串行关系,前面的接口失败是否继续执行下面接口,有两种方式,都是循环调用接口,实现方式有点差别

第一种reduce+promise

var resolves = [];
callAPI(obj) { return new Promise((resolve, reject) => { let params = { channelCode: "SW01", menuCode: "10302", operatorNo: this.operatorNo, }; obj["apiName"](Object.assign(params, obj.parse)) .then((res) => { if (Object.keys(res).length > 0) { resolves.push(res); } resolve(res); }) .catch((err) => { if (Object.keys(err).length > 0) { resolves.push(err); }
     // 如果不需要管前面接口返回结果,这里写resolve(err),否则写reject(err) resolve(err); }); }); }, async dealFuc() { const arr = [ { apiName: corpCheckCustomer, parse: { transCode: "TNEC2003", customerNo: "303390266", }, }, { apiName: accSonTypeQuery, parse: { transCode: "TNYK0009", productCode: "11020004", }, }, ]; return arr.reduce((chain, url) => { return chain.then(() => { return this.callAPI(url); }); }, Promise.resolve()); }, // 初始化调用,放在mounted中 this.dealFuc() .then((res) => { modal.alert({ message: JSON.stringify(resolves, null, 2), okTitle: "接收到的值", }); this.log("所有接口调用完成", "success"); }) .catch((err) => { modal.alert({ message: err, okTitle: "报错" }); this.log("执行过程中出错", "error"); });

第二种方法:for循环+promise

function dealFuc() {
  const arr = [
    {
      apiName: corpCheckCustomer,
      parse: {
        transCode: "",
        customerNo: "303390266",
      },
    },
    {
      apiName: accSonTypeQuery,
      parse: {
        transCode: "TNYK0009",
        productCode: "11020004",
      },
    },
  ];

  (async () => {
    try {
      var data = [];
      for (var i = 0; i < arr.length; i++) {
        let result = await new Promise((resolve, reject) => {
          setTimeout(() => {
            let params = {
              channelCode: "SW01",
              menuCode: "10302",
              operatorNo: this.operatorNo,
            };
            arr[i]["apiName"](Object.assign(params, arr[i].parse))
              .then((res) => {
                resolve(res);
              })
              .catch((err) => {
                // 判断如果第二个接口依赖于第一个接口,则写成reject(err),否则resolve(err)
                resolve(err);
              });
          });
        });
        if (Object.keys(result).length > 0) {
          data.push(result);
        }
      }
      this.$logi("data:======", data);
    } catch (e) {
      console.log({ message: e });
    }
  })();
}

 

标签:arr,resolve,apiName,err,res,顺序调用,接口,vue2
From: https://www.cnblogs.com/florazeng/p/18150568

相关文章

  • 前端如何防止接口重复提交
    什么是接口重复提交?接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。接口重复提交可能会导致多种......
  • springboot接口接收xml
    对xml文件的操作也可以借助hutool的XmlUtil.1.xml格式```xml<root> <deviceStatInfoonlineCount="64"offlineCount="2"errorCount="0"/> <data> <recordid="0"name="5号楼10层流量计"status="预警2/正常1......
  • 自动生成接口文档
    自动生成接口文档​ RESTframework可以自动帮我们生成接口文档。​ 接口文档以网页的形式呈现​ 自动接口文档能生成的是继承自APIView及其子类的视图使用步骤安装依赖​ RESTframework生成接口文档需要coreapi库的支持pipinstallcoreapi设置接口文档访问路径​ 需......
  • Reddit采集API reddit文章评论和搜索 实时数据接口
    近期调研发现iDataRiver平台https://www.idatariver.com/zh-cn/提供开箱即用的Reddit数据采集API,是目前用下来最方便简单的API,可以抓取reddit公开数据,例如subreddit中的帖子、按关键字搜索以及文章评论等,供用户按需调用。接口使用详情请参考RedditAPI接口接口列表1.获......
  • RPC接口和http接口的区别
    最本质的区别,就是RPC主要是基于TCP/IP协议的,而HTTP服务主要是基于HTTP协议的HTTP协议是在传输层协议TCP之上的,所以效率来看的话,RPC当然是要更胜一筹RPC服务RPC架构一个完整的RPC架构里面包含了四个核心的组件,分别是Client,Server,ClientStub以及ServerStub,这个S......
  • 短链接口设计&禁用Springboot执行器端点/env的安全性
    短链接口设计//短链接服务跳转方式,实现短链接转长链接的请求。@GetMapping("/{code}")publicStringredirectUrl(@PathVariable("code")Stringcode){return"redirect:"+shortUrl.getLongUrl();}禁用Springboot执行器端点/env的安全性#关闭健康检查不安全接口end......
  • 抽象类和接口有什么区别
    接口和抽象类都是用来定义对象的公共行为的,两者本身不能实例化,但二者有以下7点不同:1.定义关键字不同:接口使用关键字interface来定义,抽象类使用关键字abstract来定义。2.继承或实现的关键字不同:接口使用implements关键字定义其具体实现,抽象类使用extends关键字实现继承。......
  • 泛型模板化设计使用-订单搜索接口
    泛型模板化设计使用-订单搜索接口1.定义订单搜索接口packagecom.example.core.mydemo.java.templateQuery;//暂不使用该接口//publicinterfaceSearchService<TextendsBaseRequest,FextendsBaseResponse>{publicinterfaceSearchService<T,F>{/***订单......
  • Java设计模式-责任链模式,应用接口多个参数验证,订单多个费用的计算
    Java设计模式-责任链模式,应用接口多个参数验证,订单多个费用的计算1.定义请求和返回对象的上下文对象packagecom.example.core.mydemo.java.filter;importjava.time.LocalDateTime;publicclassOrderReqContext{/***租客会员号*/StringmemNo;......
  • 接口加密传输设计及AES加解密代码DEMO
    接口加密传输设计及AES加解密代码DEMO接口加密的方案设计:可以将请求的json字符串aes加密,通过params字段传输,接口服务端接收到参数,先解密,然后转换成对象。继续业务逻辑的处理。(另外一种方案是:针对敏感字段aes加密,服务接收端对敏感字段来解密处理)RequestVo对象:privateS......