Axios 拦截器返回 undefined 问题解析与解决方案

Axios 拦截器与响应处理机制

在现代前端开发中，axios 作为一个流行的 http 客户端，广泛用于处理网络请求。其拦截器（interceptors）功能尤为强大，允许我们在请求发送前或响应返回后进行全局处理，例如添加认证信息、统一错误处理或数据格式化。

当一个 Axios 实例 apiCaller 配置了响应拦截器时，如下所示：

// 响应处理函数
const processResponse = (res) => {
    console.log(res.status);
    if (res.status === 200) {
        return { isSuccess: true, data: res.data };
    } else {
        return {
            isFailure: true,
            status: res?.status,
            msg: res?.msg,
            code: res?.code
        };
    }
};

// Axios 响应拦截器配置
apiCaller.interceptors.response.use(
    function (res) {
        // 成功响应时，调用 processResponse 处理并返回结果
        return processResponse(res);
    },
    function (err) {
        // 错误响应时，处理错误并返回拒绝的 Promise
        return Promise.reject(processError(err));
    }
);

这个拦截器旨在对所有成功的响应调用 processResponse 函数进行标准化处理，并对错误进行统一处理。理论上，前端调用 API 时应该能够接收到 processResponse 返回的对象。然而，在某些情况下，前端却意外地接收到 undefined。

问题现象：前端接收到 undefined

考虑以下前端 API 调用代码：

const signupUser = async () => {
    const tmp = {
        username: username,
        name: name,
        password: password,
    };
    let res = await API.usersignup(tmp); // 这里的 res 总是 undefined
    console.log(res); // 输出 undefined
    if (res.isSuccess) {
        setName("");
        setUsername("");
        setPassword("");
        changeLogin;
    } else {
        setErr("Oops! Something went wrong :(");
    }
};

尽管 processResponse 函数内部 console.log(res.status) 能够正确打印状态码，表明拦截器确实被触发并处理了响应，但 API.usersignup(tmp) 的结果 res 却始终是 undefined。这表明在拦截器处理完成之后，或者在 API.usersignup 函数内部，Promise 的返回链被中断了。

根本原因：API 封装函数的定义错误

经过分析，导致此问题的根本原因通常在于封装 Axios 请求的 API 函数定义方式不正确，未能将 Axios 实例返回的 Promise 正确地传递出去。

让我们对比两种常见的 API 封装方式：

1. 错误的 API 封装方式 (导致 undefined)

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

// 假设 SERVICE_URLS 包含了 API 服务的配置
for (const [key, value] of Object.entries(SERVICE_URLS)) {
  API[key] = (body, showUploadProgress, showDownloadProgress) => { // 注意这里的 `{}`
    axiosInstance({ // 此处的 axiosInstance 调用被包含在 `{}` 中，但没有显式 return
      method: value.method,
      url: value.url,
      data: body,
      responseType: value.responseType,
      onUploadProgress: function (progressEvent) {
        if (showUploadProgress) {
          let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          showUploadProgress(percentageCompleted)
        }
      }, onDownloadProgress: function (progressEvent) {
        if (showUploadProgress) {
          let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          showDownloadProgress(percentageCompleted)
        }
      }
    })
  }
}

在这种错误的写法中，箭头函数 (body, ...) => { ... } 内部虽然调用了 axiosInstance({...})，但没有显式地使用 return 语句来返回 axiosInstance 返回的 Promise 对象。当一个箭头函数体使用 {} 包裹时，如果没有 return 语句，它会隐式地返回 undefined。因此，API[key] 最终返回的是 undefined，而不是一个 Promise，导致前端 await API.usersignup(tmp) 得到 undefined。

2. 正确的 API 封装方式

要解决这个问题，我们需要确保 API[key] 函数能够返回 axiosInstance 调用所产生的 Promise。这可以通过两种方式实现：

• 隐式返回 (推荐简洁写法): 当箭头函数体只有一条表达式时，可以省略 {} 和 return 关键字，函数会隐式地返回该表达式的值。

  for (const [key, value] of Object.entries(SERVICE_URLS)) {
    API[key] = (body, showUploadProgress, showDownloadProgress) => // 注意这里没有 `{}`
      axiosInstance({ // axiosInstance 返回的 Promise 被隐式返回
        method: value.method,
        url: value.url,
        data:body,
        responseType: value.responseType,
        onUploadProgress: function (progressEvent) {
          if (showUploadProgress) {
            let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            showUploadProgress(percentageCompleted)
          }
        }, onDownloadProgress: function (progressEvent) {
          if (showUploadProgress) {
            let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            showDownloadProgress(percentageCompleted)
          }
        }
      })
  }

  登录后复制

• 显式返回: 如果函数体需要执行多条语句，或者为了代码可读性，可以使用 {} 并显式地 return Promise。

  for (const [key, value] of Object.entries(SERVICE_URLS)) {
    API[key] = (body, showUploadProgress, showDownloadProgress) => {
      // ... 其他逻辑 ...
      return axiosInstance({ // 显式使用 return 关键字
        method: value.method,
        url: value.url,
        data:body,
        responseType: value.responseType,
        onUploadProgress: function (progressEvent) {
          if (showUploadProgress) {
            let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            showUploadProgress(percentageCompleted)
          }
        }, onDownloadProgress: function (progressEvent) {
          if (showUploadProgress) {
            let percentageCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            showDownloadProgress(percentageCompleted)
          }
        }
      });
    };
  }

  登录后复制

通过采用上述任一正确的封装方式，API[key] 函数将返回一个 Promise 对象。这个 Promise 随后会被 Axios 的响应拦截器处理，最终将 processResponse 返回的标准化数据传递给前端的 await 表达式。

注意事项与最佳实践

1. 理解 Promise 链: 确保你封装的任何异步函数（尤其是基于 Promise 的）都正确地返回了 Promise。任何中断 Promise 链的操作都可能导致后续的 .then() 或 await 接收到非预期的值（如 undefined）。
2. 箭头函数语法: 熟练掌握箭头函数的两种语法：
   • param => expression：隐式返回 expression 的值。
   • param => { statements; return expression; }：需要显式 return。
3. 调试技巧: 当遇到 undefined 响应时，可以在以下关键位置添加 console.log() 进行调试：
   • 在 axiosInstance({...}) 调用之后，检查其返回值。
   • 在 API[key] 函数的 return 语句之前，检查即将返回的值。
   • 在前端 await API.usersignup(tmp) 之前，检查 API.usersignup 是否返回了 Promise。
4. API 封装的一致性: 建议在整个项目中采用一致的 API 封装模式，以减少此类因语法细节导致的错误。

总结

Axios 拦截器在处理响应时返回 undefined 的问题，并非拦截器本身故障，而是通常由于封装 Axios 请求的函数未能正确返回 Promise 导致的。关键在于确保 API 封装函数（例如 API[key]）能够将 axiosInstance 调用产生的 Promise 传递出去。通过理解箭头函数的隐式/显式返回机制，并遵循正确的函数定义，可以有效避免此类问题，确保数据流在整个应用中的正确传递。

以上就是Axios 拦截器返回 undefined 问题解析与解决方案的详细内容，更多请关注php中文网其它相关文章！