Promise 结合 axios 实现异步请求的使用方法

文
章
目
录

• 一、Promise基础回顾
• 二、Promise 与 axios 结合使用场景及方法
• （一）直接返回 axios 并处理结果
• （二）外层包裹 new Promise 处理返回值

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