章
目
录
Promise 和 axios 作为 JavaScript 中强大的工具，它们的结合使用能让异步请求的处理变得更加高效和便捷。今天，咱们就深入探讨一下 Promise 结合 axios 的使用方法。
一、Promise基础回顾
在开始讲解二者结合的使用技巧前，先简单回顾一下 Promise。Promise 有三种状态，分别是 pendding（进行中）、fullfilled（已成功）、reject（已失败） 。一个 Promise 对象的内部有 [[PromiseState]] 和 [[PromiseResult]] 两个重要属性，[[PromiseState]] 表示当前 Promise 的状态，[[PromiseResult]] 则存储着最终的结果值，例如 [[PromiseState]]: "fulfilled" 且 [[PromiseResult]]: 23，这表明该 Promise 已成功，并且返回结果是 23。
二、Promise 与 axios 结合使用场景及方法
在实际开发中，我们经常需要使用 axios 来调用接口获取数据。在这个过程中，合理地结合 Promise 可以更好地处理异步操作的结果。下面介绍两种常见的使用方式。
（一）直接返回 axios 并处理结果
当我们需要获取 axios 调用接口后的返回值时，具体该怎么做呢？代码示例如下：
async adjBalFn(schemaGuid) {
// 定义请求参数
let params = {
agencyCode: this.agencyCode,
balanceKey: [],
fisPerd: this.date.includes('0')? Number(this.date.split('0')[1]) : Number(this.date),
schemaGuid
};
// 显示加载状态
this.$showLoading();
// 这里返回一个axios请求，axios本身返回的是一个Promise对象
return this.$axios
.post('/XXXX/api', params)
.then(result => {
// 判断接口返回的状态
if (result.data.flag ==='success') {
// 隐藏加载状态
this.$hideLoading();
// 将接口返回的数据再返回出去，供后续使用
return result.data.data;
// return Promise.resolve(111); 这里如果使用这行代码，会直接返回固定值111，而不是接口数据
} else {
// 隐藏加载状态
this.$hideLoading();
// 提示错误信息
this.$message.error(result.data.msg);
}
})
.catch(error => {
// 捕获错误，提示错误信息并隐藏加载状态
this.$message.error(error);
this.$hideLoading();
});
}
在使用这个函数时，可以像下面这样：
// 调用函数并等待其执行完成，获取返回值
let res = await this.adjBalFn(adjBalList[i].schemaGuid);
// 判断返回值是否为空对象，如果为空则提示相应信息
if (Object.keys(res).length === 0) {
this.$message.error('当前期间余额调节表还未生成，请确认生成后进行归档！');
adjBalFlag = false;
break;
}
这里的 return this.$axios 返回的是一个 Promise，而 result.data.data 就是这个 Promise 最终成功时返回的值。通过这种方式，我们可以很方便地获取到接口返回的数据，并进行后续处理。
（二）外层包裹 new Promise 处理返回值
除了上述方法，还有一种方式是在最外层返回 new Promise，然后在内部进行 resolve 操作。代码如下：
async adjBalFn(schemaGuid) {
// 定义请求参数
let params = {
agencyCode: this.agencyCode,
balanceKey: [],
fisPerd: this.date.includes('0')? Number(this.date.split('0')[1]) : Number(this.date),
schemaGuid
};
// 显示加载状态
this.$showLoading();
// 这里返回一个新的Promise
return new Promise(resolve => {
this.$axios
.post('/gl/bank/getRecon', params)
.then(result => {
// 判断接口返回状态
if (result.data.flag ==='success') {
// 隐藏加载状态
this.$hideLoading();
// 将接口返回的数据通过resolve传递出去
resolve(result.data.data);
} else {
// 隐藏加载状态
this.$hideLoading();
// 提示错误信息
this.$message.error(result.data.msg);
}
})
.catch(error => {
// 捕获错误，提示错误信息并隐藏加载状态
this.$message.error(error);
this.$hideLoading();
});
});
}
在使用这个函数时，需要通过 .then 来接收返回值：
this.adjBalFn(adjBalList[i].schemaGuid).then(res => {
// 输出返回值
console.log('res: ', res);
// 判断返回值是否为空对象，如果为空则提示相应信息
if (Object.keys(res).length === 0) {
this.$message.error('当前期间余额调节表还未生成，请确认生成后进行归档！');
adjBalFlag = false;
break;
}
});
这种方式下，最外层包裹的 new Promise 就像是一个大容器，把整个异步操作封装起来。通过 resolve 传递出去的值，就是这个函数最终返回的值，在 .then 中可以直接使用这个返回值进行后续逻辑处理。
掌握了 Promise 和 axios 的这些结合使用方法，在前端开发中处理异步接口请求时，就能更加方便。希望本文能对大家有所帮助，在实际项目开发中可以多尝试运用这些技巧。
