Vue3前后端交互错误处理一致性

在Web开发中，前后端的交互中错误处理是不可避免的，比如：前端提交数据，后端需要校验，对于不符合要求的数据需要在前端进行提示。通常的做法是在后端返回固定格式的JSON数据来处理，但由于返回的JSON格式在业务、团队等方面很难维护其规范性，所以借助错误处理的方式，在数据请求中统一封装，这样有助于程序员将精力集中到业务处理中。

1.环境

开发环境
前端	Vue3
后端	Python
	FastAPI

2.后端处理规范

• 后端在数据处理中，对数据库的操作均需要捕获异常

• 对于捕获的异常可以通过错误处理给前端返回

• 返回错误的方法如下

首先，定义一个 JSONResponse ，为什么使用 JSONResponse，而不是 HTTPException 呢？因为我们在代码中对数据库的操作需要捕获异常，所以在try块中如果使用 HTTPException 会被代码本身捕获，而不会输出到前端。

然后，在出现错误的情况下，返回给前端即可。如：

from fastapi.responses import JSONResponse
......
json_response = JSONResponse(status_code=401, content={'detail': '鉴权失败'})
......
return json_response

也可以是：

return JSONResponse(
                status_code=404,
                content='机构名称未找到！'
            )

对于content参数，既可以是字典数据，也可以是字符串。

3.前端处理规范

前端处理中，直接在封装好的请求方法中统一处理，代码如下：

import axios from 'axios'
import swal from 'sweetalert'
import {loading, loaded} from './loading'
​
const config = {
  baseURL: '',
  timeout: 60000,
  headers: {
    'Content-Type': 'application/json'
  },
  responseType: 'json'
}
​
const postRequest = (url, data) => {
  let _id = loading()
  // eslint-disable-next-line
  const promise = new Promise((resolve, reject) => {
    config.headers['Authorization'] =
        localStorage.getItem('token_type') + ' ' + localStorage.getItem('access_token')
​
    axios.post(
      url, data, config
    ).then((response) => {
      loaded(_id)
      resolve(response)
    }).catch((error) => {
      loaded(_id)
      console.log(error)
      // 对error中的数据进行处理
      let status = error.response.status
      let txt = errorToString(error)
      // 弹出错误信息
      if (status === 401) {
        swal({
          title: status.toString(),
          text: txt,
          icon: 'error',
          button: "确定",
        }).then((value) => {
          console.log(value)
          // 路由跳转
        })
      } else {
        swal(status.toString(), txt, 'error')
      }
      // reject(error)
    })
  })
​
  return promise
}
​
function errorToString (error) {
  let text = ''
  if (error.response.data) {
    if (error.response.data instanceof Object)
      text = JSON.stringify(error.response.data)
    else
      text = error.response.data
  }
  return text
}

此处，针对返回的错误，对其数据进行处理，如果返回的是一个JSON格式的数据，则将其转换为字符串，否则直接显示。

对于401错误，在显示完错误信息后，进行路由跳转，一般的操作是直接跳转到登录页面。