链式调用 多个接口调用完成后再执行后面接口调用

需求:由于页面请求查询数据并赋值,但所需赋值的选择框数据由几个接口查询获取,需要先执行完选择框接口查询,再执行数据查询

链式调用

如果只有单个选择框查询,可以在接口查询完成后成功回调函数中执行数据查询

// 获取发布地市与发放渠道字典
    function getRightActivityChoose () {
        $.ajax({
            url: url,
            method: "post",
            data: JSON.stringify({}),
            dataType: "json",
            contentType:"application/json;charset:UTF-8",
            success: function (res) {
                //查询内容详情
                getActivityDetail();
            },
            error: function (data, type, err) {
                showToast(err);
            }
        });
    }

Promise方法

//确认办理
    confirmHandle() {
      //如果没有流水号就去调用流水号获取方法
      if (this.orderId === "") {
        this.createConcertNo().then(()=>{
          this.doHandleVIP();
        });
      }else{
        this.doHandleVIP();
      }
    },
//获取流水号
    createConcertNo() {
      return new Promise((resolve, reject) => {
      this.$loading.showLoading();
        createConcertNo({})
          .then((res) => {
            this.$loading.closeLoading();
            if (res.resCode == "000000") {
                this.orderId = res.busiDataResp.orderId?res.busiDataResp.orderId:'';
                resolve();
              } else {
                reject();
                this.$toast.showToast(res.resMsg);
              }
          })
          .catch((err) => {
            reject();
            this.$toast.showToast(err);
          });     
      })
    },

回调函数

//确认办理
    confirmHandle() {
      //如果没有流水号就去调用流水号获取方法
      if (this.orderId === "") {
        this.createConcertNo(this.doHandleVIP);
      }else{
        this.doHandleVIP();
      }
    },
//获取流水号
    createConcertNo(callback) {
      this.$loading.showLoading();
        createConcertNo({})
          .then((res) => {
            this.$loading.closeLoading();
            if (res.resCode == "000000") {
                this.orderId = res.busiDataResp.orderId?res.busiDataResp.orderId:'';
                callback();
              } else {
                this.$toast.showToast(res.resMsg);
              }
          })
          .catch((err) => {
            this.$loading.closeLoading();
            this.$toast.showToast(err);
          });
    },

san框架

this.getAddressLst().then(() =>{
   this.queryCartSelectedLst().then(() => {
   });
});

多个异步调用执行完成再执行某调用

jQuery ajax处理

使用 async:false,将接口调用变成同步执行,在执行完所有字典查询后再执行数据查询

promise 处理
多个函数执行完成再执行其他函数
getData1() {
    return new Promise((resolve, reject) => {
        request1(requestParams).then((res) => {//接口1
          xxx
          resolve(res);
        }).catch(e =>{
          reject(e)
        })
    });
},
getData2() {
    return new Promise((resolve, reject) => {
        request2(requestParams).then((res) => {//接口2
          xxx
          resolve(res);
        }).catch(e =>{
          reject(e)
        })
    });
},
getData() {
    this.addLoading()//开始loading
    Promise.all([
      this.getData1(),
      this.getData2()
      ]).then(res => {
        console.log(res);
        setTimeout(() => {
          this.hideLoading()//延时结束loading
        }, 800);
    })
}

我的博客主页 :https://qingmuzhang.gitee.io/

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在清除缓存后,如果一个页面需要多次调用接口获取 token,你可以使用以下方法来处理: 1. 使用异步请求:确保每个接口调用是异步的,这样可以避免一个接口调用阻塞其他接口执行。 2. Promise 链式调用:使用 Promise 来管理接口调用的顺序。在每个接口请求完成后,再发起下一个接口的请求。这样可以确保前一个接口的响应返回后再调用下一个接口。 ```javascript // 使用 Promise 链式调用多个接口 function getToken1() { return new Promise((resolve, reject) => { // 发起 getToken1 接口请求 // 处理成功则调用 resolve(response),否则调用 reject(error) }); } function getToken2() { return new Promise((resolve, reject) => { // 发起 getToken2 接口请求 // 处理成功则调用 resolve(response),否则调用 reject(error) }); } function getToken3() { return new Promise((resolve, reject) => { // 发起 getToken3 接口请求 // 处理成功则调用 resolve(response),否则调用 reject(error) }); } // 调用示例 getToken1() .then((response1) => { // 处理 getToken1 的响应数据 return getToken2(); // 返回一个新的 Promise 对象 }) .then((response2) => { // 处理 getToken2 的响应数据 return getToken3(); // 返回一个新的 Promise 对象 }) .then((response3) => { // 处理 getToken3 的响应数据 // 所有接口请求完成 }) .catch((error) => { // 处理错误情况 }); ``` 通过使用 Promise 链式调用,你可以确保每个接口调用顺序和依赖关系,并在所有接口请求完成后进行处理。 请根据实际情况替换示例接口请求代码,并根据需要进行错误处理和数据处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值