请求处理

sunlight-admin 使用 axios 进行 HTTP 请求处理，包含了请求拦截器、响应拦截器、错误处理等功能。

项目配置

const request = axios.create({
  // 默认地址请求地址，可在 .env.** 文件中修改
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 30 * 1000, // Timeout
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
  // 跨域时候允许携带凭证
  // withCredentials: true
})

请求拦截器

在发送请求之前执行处理操作，主要用于 token 注入：

request.interceptors.request.use(
  config => {
    // 在发送请求之前执行处理操作
    const token = getToken()
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    // 对请求错误执行处理操作
    return Promise.reject(error)
  }
)

响应拦截器

对服务器返回的响应进行统一处理：

request.interceptors.response.use(
  response => {
    return response.data
  },
  async error => {
    const { response } = error
    // 根据服务器响应的错误状态码，做不同的处理
    if (response) checkStatus(response.status)
    // 服务器结果都没有返回(可能服务器错误可能客户端断网)，断网处理:可以跳转到断网页面
    const isOnline = await isOnLine()
    if (!isOnline) router.replace('/500')
    return Promise.reject(error)
  }
)

错误处理

状态码检查

export const checkStatus = (status: number) => {
  switch (status) {
    case 400:
      ElMessage.error('请求失败！请您稍后重试')
      break
    case 401:
      ElMessage.error('登录失效！请您重新登录')
      break
    case 403:
      ElMessage.error('当前账号无权限访问！')
      break
    case 404:
      ElMessage.error('你所访问的资源不存在！')
      break
    case 405:
      ElMessage.error('请求方式错误！请您稍后重试')
      break
    case 408:
      ElMessage.error('请求超时！请您稍后重试')
      break
    case 500:
      ElMessage.error('服务异常！')
      break
    case 502:
      ElMessage.error('网关错误！')
      break
    case 503:
      ElMessage.error('服务不可用！')
      break
    case 504:
      ElMessage.error('网关超时！')
      break
    default:
      ElMessage.error('请求失败！')
  }
}

网络状态检测

export function isOnLine() {
  let img = new Image()
  img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now()
  return new Promise(resolve => {
    img.onload = function () {
      resolve(true)
    }
    img.onerror = function () {
      resolve(false)
    }
  })
}

Token 管理

import Cookies from 'js-cookie'

const TokenKey = 'bk_token' // 自定义修改

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token: any) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

使用示例

import request from '@/plugins/request'

// GET 请求
request.get('/api/user', { params: { id: 1 } })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

// POST 请求
request.post('/api/user', { name: 'test', age: 18 })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })