目录

前端代码

request工具类

创建axios实例

baseURL

拦截器

代理转发

---

以查询课程管理列表为例

前端代码

再来查看一下listCourse方法：

为了简化axios请求的发送，ListCourse方法里直接调用了request工具类，给工具类传入请求路径、请求方式以及请求参数。

request工具类

我们来看看request工具类的内容:

创建axios实例

上面的代码通过axios创建了一个请求的实例对象。创建时有两个参数：

baseURL

它的作用是在axios发送请求之前，为请求地址拼接一个前缀，并且该前缀并没有写死，而是读取当下的环境文件，项目中一共有三个环境文件（从上到下，分别是开发环境文件、生产环境文件和测试环境文件。）：

可以看到，开发环境文件中就定义了VITE_APP_BASE_API的值为‘/dev-api’，表示为请求地址拼接的前缀‘/dev-api’。

项目中具体使用哪种环境文件，取决于用什么命令运行项目：

timeout

它用于指定请求的超时时间，单位是毫秒。

拦截器

该工具类创建好axios实例后，还为请求和响应增加了拦截器

前端会通过axios工具向后端发送请求，在发送请求之前，会通过请求拦截器来对该请求进行增强，并将增强后的内容交给后端进行业务处理；后端将处理的结果返回给前端之前，会通过响应拦截器来对响应结果进行增强。所以，拦截器就是对请求和响应做增强的。

请求拦截器

代码：

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
    if (requestSize >= limitSize) {
      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
      return config;
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                // 请求地址
      const s_data = sessionObj.data;              // 请求数据
      const s_time = sessionObj.time;              // 请求时间
      const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理，请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

这段代码是一个 Axios 请求拦截器，用于在发送请求之前进行一些处理。以下是主要功能分析：

1. Token 处理：检查请求头中是否需要设置 Token。如果存在 Token（通过 getToken() 获取），且请求不要求跳过 Token，则将其添加到请求头的 Authorization 中。

2. GET 请求参数处理：对于 GET 请求，如果有 params，将其转换为查询字符串，并更新请求的 URL。

3. 防止重复提交：对于 POST 和 PUT 请求，代码会检查是否需要防止重复提交。它会计算请求数据的大小，并限制在 5MB 以内。若超出限制，则打印警告并返回。

4. 重复提交验证：使用 session 存储最近的请求信息，比较当前请求与上一个请求的 URL、数据和时间。如果两者相同且时间间隔小于设定的 1000ms（1秒），则认为是重复提交，并拒绝当前请求。

5. 返回配置：最后，经过处理的请求配置会被返回。

这个拦截器有效地管理 Token，避免重复提交，以及确保请求数据不超出限制。

响应拦截器

代码：

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    // 二进制数据则直接返回
    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
      return res.data
    }
    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true;
        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
          useUserStore().logOut().then(() => {
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;
      });
    }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))
    } else if (code === 601) {
      ElMessage({ message: msg, type: 'warning' })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      ElNotification.error({ title: msg })
      return Promise.reject('error')
    } else {
      return  Promise.resolve(res.data)
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  }
)

这段代码是一个 Axios 响应拦截器，用于处理服务器返回的响应。以下是主要功能分析：

1. 状态码处理：首先获取响应中的状态码，如果未设置则默认为 200。根据状态码选择相应的错误消息。

2. 二进制数据处理：如果响应的 responseType 是 blob 或 arraybuffer，则直接返回响应数据，不进行其他处理。

3. 未授权处理：当状态码为 401 时，表示用户未登录或会话过期。通过 ElMessageBox 弹出确认框，提示用户重新登录。如果用户选择重新登录，则调用 logOut() 方法并跳转到首页。

4. 错误处理：对状态码为 500 和 601 的情况，分别显示错误和警告消息。对于其他非 200 的状态码，使用 ElNotification 显示错误。

5. 正常响应：如果状态码为 200，正常返回响应数据。

6. 网络错误处理：在捕获的错误中，根据不同的错误类型（如网络错误、超时或状态码错误），设置相应的错误消息并使用 ElMessage 显示。

这段代码旨在处理各种响应状态并进行适当的用户反馈，确保用户体验流畅。

代理转发

这段代码是一个 Vite 配置中的 server 设置，主要用于配置开发服务器的行为。以下是各部分的分析：

1. port: 设置开发服务器监听的端口为 80，通常用于 HTTP 服务。

2. host: 设置为 true，表示允许外部访问该服务，通常用于本地开发时需要从其他设备访问。

3. open: 设置为 true，表示在启动开发服务器时自动打开浏览器。

4. proxy: 这是代理配置，用于将特定请求转发到其他服务器。这里配置了一个代理，将以 /dev-api 开头的请求转发到目标服务器 http://localhost:8081。

   • target: 指定目标服务器的地址，可以是本地或远程地址。
   • changeOrigin: 设置为 true，表示在代理请求中将原始请求的 Origin 头改为目标 URL 的 Origin，以避免跨域问题。
   • rewrite: 使用正则表达式重写请求路径，将请求路径中的 /dev-api 移除。例如，如果请求 /dev-api/example，它将被转发为 /example。

这段配置主要用于在开发过程中处理 API 请求，确保前端能在本地开发环境中无缝地与后端服务进行交互。