axios 配置

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

拦截器使用

请求前 & 响应前拦截器

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // api 的 base_url
  timeout: config.request_timeout, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token
    const isToken = useStorage('token', null)
    if (config.headers) {
      // 请根据实际情况修改
      if (isToken.value)
        config.headers.Authorization = `Bearer ${isToken.value}`
    }

    return config
  },
  (error) => {
    // 处理请求错误
    console.log(error) // 用于调试
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const data = response.data
    if (
      response.status === result_code
      && response.request.responseType === 'blob'
    )
      return response
    if (data.code === result_code) {
      return data

      // 501: 非法令牌; 502: 其他客户端已登录; 503: 令牌已过期;
    }
    else if ([501, 502, 503].includes(data.code)) {
      // 重新登录
      localStorage.clear()
      ElMessage.error(data.message)
      return false
    }
    else {
      ElMessage.error(data.message)
      return Promise.reject(data)
    }
  },
  (error: AxiosError) => {
    console.error(error) // 用于调试
    let msg = error.message
    switch (error.code) {
      case 'ECONNABORTED':
        msg = '服务器连接超时！'
        break
      case 'ERR_BAD_REQUEST':
        msg = '页面不存在！'
        break
      default:
        break
    }
    ElMessage.error(msg)
    return Promise.reject(error)
  }
)

export default service

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // api 的 base_url
  timeout: config.request_timeout, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token
    const isToken = useStorage('token', null)
    if (config.headers) {
      // 请根据实际情况修改
      if (isToken.value)
        config.headers.Authorization = `Bearer ${isToken.value}`
    }

    return config
  },
  (error) => {
    // 处理请求错误
    console.log(error) // 用于调试
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const data = response.data
    if (
      response.status === result_code
      && response.request.responseType === 'blob'
    )
      return response
    if (data.code === result_code) {
      return data

      // 501: 非法令牌; 502: 其他客户端已登录; 503: 令牌已过期;
    }
    else if ([501, 502, 503].includes(data.code)) {
      // 重新登录
      localStorage.clear()
      ElMessage.error(data.message)
      return false
    }
    else {
      ElMessage.error(data.message)
      return Promise.reject(data)
    }
  },
  (error: AxiosError) => {
    console.error(error) // 用于调试
    let msg = error.message
    switch (error.code) {
      case 'ECONNABORTED':
        msg = '服务器连接超时！'
        break
      case 'ERR_BAD_REQUEST':
        msg = '页面不存在！'
        break
      default:
        break
    }
    ElMessage.error(msg)
    return Promise.reject(error)
  }
)

export default service

axios 配置 ​

拦截器使用 ​

axios 配置

拦截器使用