JS多次请求接口按顺序依次执行解决办法

 更新时间:2024年04月19日 10:28:48   作者:donghua201  
在JavaScript中for循环是同步的,意味着每个循环都会等待前一个循环的请求完成后才会执行下一个循环,这篇文章主要给大家介绍了关于JS多次请求接口按顺序依次执行的解决办法,需要的朋友可以参考下

需求:在开发中需要同时请求多个接口,但是需要请求按顺序执行。比如先拿到接口a的返回值shopId,作为接口b的请求参数再调接口拿到仓库列表。

解决办法: 将接口a封装在Promise中,在调用Promise前加上await,await会等待Promise中执行完resolve时,才会再进行下一步操作。

// 1、获取用户列表,将第一位用户的门店设置为当前门店
getUsers() {
  return new Promise((resolve, reject) => {
    let data = {
      limit: 999,
      page: 1,
      roleIds: "1,2",
      bindStatus: 0,
    };
    getBuyUserList(data)
      .then((res) => {
        this.userList = res.list;
        if (!this.form.buyId) {
          this.form.buyUserId = res.list[0].userId;
          this.form.shopId = res.list[0].shopId;
        }
        // promise封装的接口里面可以没有return,但是一定要调用 resolve 函数,表明异步任务顺利完成且返回结果值
        resolve();
      })
      .catch((error) => {
        reject(error);
      });
  });
},
///2、设置仓库的默认项
setDefaultSelection() {
  let data = {
    page: 1,
    limit: 10,
    shopId: this.form.shopId,  //只筛选当前门店关联的仓库
  };
  getWarehouseList(data).then((res) => {
    this.warehouseList = res.list;
    if (!this.form.buyId) {
      this.form.warehouseId = this.warehouseList[0].warehouseId;
      this.form.warehouseName = this.warehouseList[0].name;
    }
  });
},
// Vue实例被创建后立即调用接口获取筛选项数据
async created() {
    await this.getUsers();
    this.setDefaultSelection();
}

Promise对象

简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

Promise 是一个对象,Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。axios 的内部实现原理就是通过 Promise 实现的。

Promise对象的两个特点

  • 对象的状态不受外界影响。有三种状态:pending(进行中)、fulfilled(成功)和rejected(失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为resolved和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果

Promise对象是一个构造函数,用来生成Promise实例,带有一个回调函数,回调函数的两个参数是 resolve(成功) 和 reject(失败),这两个参数他们也是函数。

链式调用then方法

then方法的第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数,它们都是可选的。

但是规范化的写法是调用then和catch方法。

let p = Promise.resolve("foo");
// 等价于
let p = new Promise((resolve) => {
  resolve("foo");
});

p.then((data) => {
  console.log(data); //输出'foo'
});


var p2 = new Promise(function (resolve, reject) {
  var flag = false;
  if(flag){
    resolve('这是数据2');
  }else{
    reject('这是数据2');
  }
});

p2.then(function(data){//状态为fulfilled时执行
  console.log(data);
  console.log('这是成功操作');
},function(reason){ //状态为rejected时执行
  console.log(reason);
  console.log('这是失败的操作');
});

总结 

到此这篇关于JS多次请求接口按顺序依次执行解决办法的文章就介绍到这了,更多相关JS多次请求接口按顺序执行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Echarts x轴为time的用法代码示例

    Echarts x轴为time的用法代码示例

    平时项目里数据可视化展示用的大多是echarts或者highcharts,下面这篇文章主要给大家介绍了关于Echarts x轴为time用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 浅谈Javascript实现继承的方法

    浅谈Javascript实现继承的方法

    本文给大家简单介绍了下如何在javascript中实现继承的几种方法,十分的实用,有需要的小伙伴可以参考下。
    2015-07-07
  • jJavaScript中toFixed()和正则表达式的坑

    jJavaScript中toFixed()和正则表达式的坑

    这篇文章主要介绍了jJavaScript中toFixed()和正则表达式的坑,toFixed方法可以把Number四舍五入为指定小数位数的数字,具体详细内容需要的小伙伴可以参考一下
    2022-04-04
  • 微信小程序 简易计算器实现代码实例

    微信小程序 简易计算器实现代码实例

    这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS实现对JSON数据进行冒泡排序

    JS实现对JSON数据进行冒泡排序

    JavaScript 是一种广泛使用的脚本语言,JSON是一种常见的数据格式,这篇文章主要来探讨一下如何使用 JavaScript 对 JSON 数据进行冒泡排序,感兴趣的可以了解一下
    2023-06-06
  • 对frameset、frame、iframe的js操作示例代码

    对frameset、frame、iframe的js操作示例代码

    父框架到子框架的引用、子框架到父框架的引用、兄弟框架间的引用、不同层次框架间的互相引用具体实现如下,有此需求的朋友可以参考下
    2013-08-08
  • 提高JavaScript执行效率的23个实用技巧

    提高JavaScript执行效率的23个实用技巧

    JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript提高执行效率的小技巧、最佳实践等非常实用的内容
    2017-03-03
  • javascript实现简单倒计时效果

    javascript实现简单倒计时效果

    这篇文章主要为大家详细介绍了javascript实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS根据key值获取URL中的参数值及把URL的参数转换成json对象

    JS根据key值获取URL中的参数值及把URL的参数转换成json对象

    本篇文章主要围绕js url 参数值展开话题,js根据key值获取url中的参数值,接着把url的参数转换成json,感兴趣的朋友一起来学习吧,本文写的不好地方还望多多指出批评建议
    2015-08-08
  • 浅谈JavaScript中定义变量时有无var声明的区别

    浅谈JavaScript中定义变量时有无var声明的区别

    这篇文章主要介绍了JavaScript中定义变量时有无var声明的区别分析以及示例分享,需要的朋友可以参考下
    2014-08-08

最新评论