新手小白，搭建vue框架时对于响应拦截器相关问题

 

复制后的框架，当调用登录页面时接口，验证码输入错误时，接口返回错误如下{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 参数包含可能发生的错误对象。

成功响应的回调函数的主要任务是对响应进行处理，并返回处理后的结果。在这个例子中，回调函数的实现逻辑涵盖了几个方面：

1. 首先，它检查响应的 responseType 属性，如果值为 'blob'，表示服务器返回的是一个二进制流（文件等），则直接返回该响应对象。

2. 否则，它从响应数据中提取 code、message 和 result 等属性。如果 code 不等于 1000，表示服务器返回的是一个错误响应，将会显示一个错误消息，并根据具体的错误代码采取相应的处理措施。这里的处理措施包括显示错误消息，处理特定的错误代码（如 405）等。

3. 如果 code 等于 1000，表示服务器返回的是一个成功的响应，将会返回 result 数据。

Util.ajax的响应拦截器中的操作只有在收到成功的响应（状态码为200）后才会触发。拦截器在收到响应后被调用，并且只有在响应状态码为200时，即表示请求成功，才会执行拦截器中的操作。

对于状态码为200的成功响应，拦截器会执行以下操作：

1. 首先，它会关闭正在显示的加载中的提示框。

2. 然后，它会检查响应数据的 responseType 属性。如果该属性的值为 'blob'，表示服务器返回的是一个二进制流（文件等），拦截器会直接返回该响应对象。

3. 如果 responseType 不是 'blob'，拦截器会检查响应数据中的 code、message 和 result 属性。

4. 如果 code 不等于200，表示服务器返回的是一个错误响应，拦截器会显示一个错误消息，并根据具体的错误代码采取相应的处理措施。

5. 如果 code 等于200，表示服务器返回的是一个成功的响应，拦截器会返回 result 数据。

而上述代码块中代码则是Util.ajax 的响应拦截器中的错误处理部分，用于处理请求失败的情况。当请求失败时（如网络错误、服务器错误等），拦截器中的错误回调函数会被触发。

具体触发时机如下：

1. 如果请求发送失败，例如网络连接错误或超时，导致无法收到服务器的响应，那么 axios 会将该失败情况包装成一个错误对象，并通过 Promise 的 reject 方法返回。拦截器中的错误回调函数会接收到该错误对象作为参数，代码中的 error 参数就表示这个错误对象。

2. 如果请求发送成功，但服务器返回了一个失败的响应（状态码不是200），拦截器中的成功回调函数不会被触发，而是会直接进入拦截器中的错误回调函数。此时，拦截器中的 error.response 属性会被设置为服务器返回的响应对象，包括状态码、响应头和响应数据等信息。

在这段代码中，首先会关闭正在显示的加载中提示框（如果有的话）。然后，它会检查响应对象 error.response，根据不同的状态码进行相应的处理操作：

• 如果状态码是400，表示请求错误，会显示一个错误提示消息。

• 如果状态码是401，表示未授权，可以在这里处理需要登录或授权的操作。

• 如果状态码是403，表示禁止访问，会显示一个禁止访问的错误提示消息。

• 如果状态码是404，表示未找到资源，可以在这里进行相应的处理。

• 如果状态码是413，表示请求的实体太大，权限不足，可以在这里进行相应的处理。

• 对于其他与网络相关的错误，会显示一个网络不佳的错误提示消息。

如果没有响应对象（即 error.response 为 undefined），表示在发送请求时就发生了网络错误，也会显示一个网络不佳的错误提示消息。

最后，代码通过 Promise.reject(response) 将错误对象继续传递下去，以便在调用 Util.ajax 的地方可以继续处理该错误。

综上所述，当想让页面正确提示后台返回的错误信息，则需要后端配合先将登录接口状态变为200，而后返回code为500，message：‘动态验证码错误’