本文详解如何在JavaScript中实现多个异步接口的顺序执行。通过封装Promise并结合await关键字，确保前一个接口返回结果后再发起下一个请求，有效解决依赖参数传递问题。文章涵盖Promise状态机制、链式调用及实际代码示例，帮助开发者掌握异步串行处理的规范写法。
开发场景中常遇到需同时发起多个接口请求，但业务逻辑要求必须按特定顺序执行的情况。例如，必须先获取接口A的返回值（如shopId），将其作为参数传递给接口B，才能成功获取仓库列表数据。
核心解决方案是将第一个接口请求封装为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是一个容器，用于保存一个通常涉及异步操作的未来事件结果。
作为JavaScript内置对象，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多次请求接口按顺序执行内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！