JS多次请求接口按顺序依次执行解决办法
作者：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多次请求接口按顺序执行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！