前后端联调系列01

一:前言

http 响应状态码 200 是正确的 但是业务有可能是错误的
比如，我调用登录接口,密码错误了，
此时http 响应状态码 是200 ，但是业务是错误的

如果在业务代码代码中重复的catch(e) { 展示给用户 }，就非常的不优雅

二:解决什么问题?

在进行业务开发的时候，前后端会对接口的数据结构进行约定，若接口有异常，需要将异常信息展示给用户知晓。这个流程里，数据结构是确定的（事先约定），数据的处理逻辑是相同的（展示给用户），如果在业务代码代码中重复的catch(e) { 展示给用户 }，就非常的不优雅。需要对接口错误进行统一处理。

先说思路

• 后端通过http状态标识接口状态，错误信息在response的data里
• 前端的处理逻辑是使用组件库的统一响应的Message展示错误信息

axios的统一处理

axios是基于 Promise 的 ajax 封装库，也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求，是一个轻量级的库，使用时可直接引入。

异步的 ajax 请求库。
在浏览器端和 node 端都可以使用。
支持 Promise API。
支持请求和响应拦截。
响应数据自动转换 JSON 数据。
支持请求取消。
可以批量发送多个请求。
客户端支持安全保护，免受 XSRF 攻击。

三:问题演示

 以下是前端调用2个接口，后面称为操作一，操作二

1. 根据删除一条id为？的部门数据，实际上数据库中没有那一条数据 (实际业务中都是改状态，这里为了演示真删)
2. 调用查询全部的部门数据

对应的前端代码如下

数据库的数据，没有id为1的

操作一出错了，http响应码是200，但是业务错了

前端执行操作一，传入参数id = 1 ，运行
操作一出错了，http响应码是200，但是业务错了
既然数据库没有id为1的 ，操作二这句代码，先不要运行

怎么知道是业务错了呢？
前后端一起约定，后端code只要等于0 那就是出错了

服务器统一响应代码

结果如下，操作二仍然是执行了，即便后端返回了code为0

四:解决方案

1定义一个axios响应拦截器

import axios from "axios"
import store from '@/store'
import router from '@/router/index.js'
import { Toast } from 'vant';

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,// 基础路径
  timeout: 5 * 1000 // 定义5秒超时 
})


// 响应拦截器
request.interceptors.response.use(

  // 在2xx范围内的任何状态代码都会触发此函数，这里主要用于处理响应数据
  response => {
    return response.data
  },
  // 任何超出2xx范围的状态码都会触发此函数，这里主要用于处理响应错误
  error => {
    // 将未处理的异常往外抛
    return Promise.reject(error)
  })


export default request

 在2xx范围内打印看看，是什么情况

 + console.log('响应拦截器',response);

axios自动封装了一层data,后端响应来的原来在这里,接下来就好办了

2统一响应的Message展示错误信息

import axios from "axios"
import store from '@/store'
import router from '@/router/index.js'
import { Toast } from 'vant';

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,// 基础路径
  timeout: 5 * 1000 // 定义5秒超时 
})


// 响应拦截器
request.interceptors.response.use(

  // 在2xx范围内的任何状态代码都会触发此函数，这里主要用于处理响应数据
  response => {
    console.log('响应拦截器',response);
    // 这里是前后端的约定,如果code===0的话，虽然axios响应码是200,但是业务错误
    if (response.data.code === 0) {
      // 错误提示
      Toast(response.data.message || '业务失败')
      // 返回 错误的promise
      return Promise.reject(response.data)
      // 传入 code 将来catch的时候可以使用
    }

    
    return response.data
  },
  // 任何超出2xx范围的状态码都会触发此函数，这里主要用于处理响应错误
  error => {
    // 将未处理的异常往外抛
    return Promise.reject(error)
  })


export default request

再执行一次操作一,理想结果，操作二不要运行

删除一条id1的部门数据失败了
给予了用户消息提醒，操作二没有成功运行
符合我们想要的结果
由此，一个简单的响应拦截器开发完成，这是前后端一起商量配合完成的，不同的项目可能响应状态会不同

五:后续优化

1axios是基于 Promise 的 ajax 封装库，操作二什么时候触发？前端代码能否优化？

2axios自动封装了一层data,前端拿的时候，怎么直接取服务器的Result对象?

3http响应码401Token过期,在拦截器中要不要做点什么?