理解Axios响应拦截器
axios的响应拦截器是一个强大的工具，允许我们在响应到达.then()或.catch()之前对其进行全局处理。这对于统一的错误处理、数据格式化或日志记录非常有用。
在给定的场景中，我们有一个processResponse函数用于处理成功的响应，并一个processError函数用于处理错误。响应拦截器的设置如下：
// processResponse 函数用于处理成功的响应
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函数会根据响应状态返回一个包含isSuccess或isFailure的对象，并且在拦截器中，这个函数的返回值被正确地返回了。这意味着拦截器本身工作正常，它会返回一个经过处理的响应对象或一个被拒绝的Promise。
问题的根源：API包装函数的返回机制
尽管响应拦截器似乎工作正常，但前端在调用API后仍然收到undefined。这通常发生在API调用被一个包装函数封装起来时，而这个包装函数没有正确地返回Axios请求的Promise。
让我们来看一个常见的错误示例，它可能导致这种undefined行为：
立即学习“前端免费学习笔记（深入）”；
// 错误的 API 包装函数示例
for (const [key, value] of Object.entries(SERVICE_URLS)) {
API[key] = (body, showUploadProgress, showDownloadProgress) => { // 注意这里的 `{`
axiosInstance({ // Axios 请求被包含在花括号内
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)
}
}
})
} // 这里的 `}` 导致函数隐式返回 undefined
}在这个错误的示例中，API[key]被赋值为一个箭头函数。当箭头函数体使用花括号{}时，它需要一个显式的return语句来返回一个值。如果没有return语句，该函数将隐式地返回undefined。
axiosInstance({...})调用本身会返回一个Promise，但由于它被包裹在花括号{}中，并且没有return关键字，所以API[key]这个函数最终返回的并不是Axios的Promise，而是undefined。因此，当前端调用await API.usersignup(tmp)时，res变量接收到的就是这个undefined。
解决方案：确保API包装函数返回Promise
要解决这个问题，我们需要确保API包装函数能够正确地返回axiosInstance调用所生成的Promise。这可以通过两种方式实现：
-
隐式返回（推荐用于简洁代码）： 如果箭头函数体只有一条表达式，并且你希望该表达式的结果作为函数的返回值，你可以省略花括号{}和return关键字。
// 正确的 API 包装函数示例 (使用隐式返回) for (const [key, value] of Object.entries(SERVICE_URLS)) { API[key] = (body, showUploadProgress, showDownloadProgress) => // 注意这里没有 `{` axiosInstance({ // axiosInstance 的结果被隐式返回 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) } } }) }在这个修正后的代码中，axiosInstance({...})的调用结果（一个Promise）被直接作为箭头函数的返回值。
-
显式返回： 如果函数体较复杂或为了代码清晰，你也可以保留花括号{}，但必须显式地使用return关键字。
// 另一种正确的 API 包装函数示例 (使用显式返回) for (const [key, value] of Object.entries(SERVICE_URLS)) { API[key] = (body, showUploadProgress, showDownloadProgress) => { // 保留 `{` return axiosInstance({ // 显式地 return 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) } } }) } }这两种方式都能确保API[key]函数返回的是Axios的Promise，从而允许前端正确地接收到响应。
前端如何消费API
一旦API包装函数被正确修正，前端调用代码将能够正常工作，并接收到由Axios拦截器处理后的响应数据：
const signupUser = async () => {
const tmp = {
username: username,
name: name,
password: password,
};
// 现在 res 将会是 processResponse 函数返回的对象，而不是 undefined
let res = await API.usersignup(tmp);
console.log(res); // 此时会正确打印出 { isSuccess: true, data: ... } 或 { isFailure: true, ... }
if (res.isSuccess) {
setName("");
setUsername("");
setPassword("");
changeLogin;
} else {
setErr("Oops! Something went wrong :(");
}
};注意事项与总结
- 箭头函数返回机制： 这是解决此类问题的关键。记住，当箭头函数体有花括号{}时，必须显式使用return关键字来返回值；否则，它将隐式返回undefined。如果函数体只有一条表达式，可以省略花括号和return来实现隐式返回。
- Promise链的完整性： 在任何异步操作（如Axios请求）的包装函数中，务必确保最终返回的是Promise对象，这样调用者才能通过.then()/.catch()或await正确地处理结果。
- 调试技巧： 当遇到undefined的异步结果时，首先检查异步操作的直接调用处，确保它返回了预期的Promise。然后，向上追溯到任何包装函数，检查其返回机制。
- 代码可读性： 虽然隐式返回可以使代码更简洁，但在复杂的逻辑中，显式return可以提高代码的可读性。根据团队规范和具体场景选择最合适的风格。
通过理解并正确应用箭头函数的返回机制，我们可以避免在Axios API调用中出现undefined响应的问题，从而构建更健壮、可预测的应用程序。
