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 的这些结合使用方法，在前端开发中处理异步接口请求时，就能更加方便。希望本文能对大家有所帮助，在实际项目开发中可以多尝试运用这些技巧。