复制后的框架,当调用登录页面时接口,验证码输入错误时,接口返回错误如下{code: "500", message: "验证码错误!", result: null, currentDate: "2023-05-26 09:30:09"},但页面提示为,网络不佳,而不是对应message消息。
几番查证才发现是自己对拦截响应器理解不透彻,附代码如下:
Util.ajax.interceptors.response.use(
(response) => {
// ...现有的代码...
},
(error) => {
// 请求失败也把loading关闭
if (loading) {
loading.close()
}
const response = error.response
if (response) {
if (response.status === 400) {
// 处理400错误
return hint.erro('错误的请求!')
} else if (response.status === 401) {
// 处理401错误
} else if (response.status === 403) {
// 处理403错误
return hint.erro('禁止访问!')
} else if (response.status === 404) {
// 处理404错误
} else if (response.status === 413) {
// 处理413权限不足
} else {
// 处理其他与网络相关的错误
Message({
message: '网络不佳',
type: 'error',
duration: 5 * 1000
})
}
} else {
// 在没有响应对象时处理与网络相关的错误
Message({
message: '网络不佳',
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(response)
}
)
因为后台当验证码错误时,后台接口直接状态码显示为500,所以没有进入Util.ajax
的响应拦截器。
Util.ajax.interceptors.response.use
是 axios
库提供的响应拦截器的注册方法。用来注册一个用于处理响应的拦截器。拦截器是一种机制,它允许在发送请求和接收响应之间对请求或响应进行拦截、处理和修改。该拦截器将在每个成功的响应返回之后被调用。
具体来说,代码中的拦截器函数接受两个参数:一个处理成功响应的回调函数和一个处理错误响应的回调函数。在这段代码中,我们只关注处理成功响应的回调函数部分。
成功响应的回调函数有两个参数:response
和 error
。response
参数包含从服务器返回的完整响应对象,包括响应头、状态码和响应数据等信息。error
参数包含可能发生的错误对象。
成功响应的回调函数的主要任务是对响应进行处理,并返回处理后的结果。在这个例子中,回调函数的实现逻辑涵盖了几个方面:
-
首先,它检查响应的
responseType
属性,如果值为'blob'
,表示服务器返回的是一个二进制流(文件等),则直接返回该响应对象。 -
否则,它从响应数据中提取
code
、message
和result
等属性。如果code
不等于 1000,表示服务器返回的是一个错误响应,将会显示一个错误消息,并根据具体的错误代码采取相应的处理措施。这里的处理措施包括显示错误消息,处理特定的错误代码(如 405)等。 -
如果
code
等于 1000,表示服务器返回的是一个成功的响应,将会返回result
数据。
Util.ajax
的响应拦截器中的操作只有在收到成功的响应(状态码为200)后才会触发。拦截器在收到响应后被调用,并且只有在响应状态码为200时,即表示请求成功,才会执行拦截器中的操作。
对于状态码为200的成功响应,拦截器会执行以下操作:
-
首先,它会关闭正在显示的加载中的提示框。
-
然后,它会检查响应数据的
responseType
属性。如果该属性的值为'blob'
,表示服务器返回的是一个二进制流(文件等),拦截器会直接返回该响应对象。 -
如果
responseType
不是'blob'
,拦截器会检查响应数据中的code
、message
和result
属性。 -
如果
code
不等于200,表示服务器返回的是一个错误响应,拦截器会显示一个错误消息,并根据具体的错误代码采取相应的处理措施。 -
如果
code
等于200,表示服务器返回的是一个成功的响应,拦截器会返回result
数据。
而上述代码块中代码则是Util.ajax
的响应拦截器中的错误处理部分,用于处理请求失败的情况。当请求失败时(如网络错误、服务器错误等),拦截器中的错误回调函数会被触发。
具体触发时机如下:
-
如果请求发送失败,例如网络连接错误或超时,导致无法收到服务器的响应,那么
axios
会将该失败情况包装成一个错误对象,并通过 Promise 的reject
方法返回。拦截器中的错误回调函数会接收到该错误对象作为参数,代码中的error
参数就表示这个错误对象。 -
如果请求发送成功,但服务器返回了一个失败的响应(状态码不是200),拦截器中的成功回调函数不会被触发,而是会直接进入拦截器中的错误回调函数。此时,拦截器中的
error.response
属性会被设置为服务器返回的响应对象,包括状态码、响应头和响应数据等信息。
在这段代码中,首先会关闭正在显示的加载中提示框(如果有的话)。然后,它会检查响应对象 error.response
,根据不同的状态码进行相应的处理操作:
-
如果状态码是400,表示请求错误,会显示一个错误提示消息。
-
如果状态码是401,表示未授权,可以在这里处理需要登录或授权的操作。
-
如果状态码是403,表示禁止访问,会显示一个禁止访问的错误提示消息。
-
如果状态码是404,表示未找到资源,可以在这里进行相应的处理。
-
如果状态码是413,表示请求的实体太大,权限不足,可以在这里进行相应的处理。
-
对于其他与网络相关的错误,会显示一个网络不佳的错误提示消息。
如果没有响应对象(即 error.response
为 undefined
),表示在发送请求时就发生了网络错误,也会显示一个网络不佳的错误提示消息。
最后,代码通过 Promise.reject(response)
将错误对象继续传递下去,以便在调用 Util.ajax
的地方可以继续处理该错误。
综上所述,当想让页面正确提示后台返回的错误信息,则需要后端配合先将登录接口状态变为200,而后返回code为500,message:‘动态验证码错误’