Vue之Request初始化

Request初始化

Import

import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
import {getToken} from '@request/token'

axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js。

Message 是 element-ui 提供的消息提示组件。

store 是 Vuex 的状态管理实例。

getToken 是一个方法，用于获取当前用户的 token。

创建axios实例

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 10000
})

baseURL 指定了请求的基础 URL，process.env.BASE_API 读取环境变量中的 API 地址。

timeout 设置请求的超时时间为 10000 毫秒（10 秒）。

请求拦截器

service.interceptors.request.use(config => {
if (store.state.token) {
config.headers[‘Oauth-Token’] = getToken()
}
return config
}, error => {
Promise.reject(error)
})

在每个请求发送之前，拦截器会检查 Vuex store 中是否存在 token。

如果存在 token，则在请求头中添加 Oauth-Token。

响应拦截器

service.interceptors.response.use(
  response => {
    if (response.headers['session_time_out'] == 'timeout') {
      store.dispatch('fedLogOut')
    }
    const res = response.data;
    if (res.code !== 0) {
      if (res.code === 90001) {
        return Promise.reject('error');
      }
      if (res.code === 20001) {
        console.info("用户未登录")
        Message({
          type: 'warning',
          showClose: true,
          message: '未登录或登录超时，请重新登录哦'
        })
        return Promise.reject('error');
      }
      if (res.code === 70001) {
        console.info("权限认证错误")
        Message({
          type: 'warning',
          showClose: true,
          message: '你没有权限访问哦'
        })
        return Promise.reject('error');
      }
      return Promise.reject(res.msg);
    } else {
      return response.data;
    }
  },
  error => {
    Message({
      type: 'warning',
      showClose: true,
      message: '连接超时'
    })
    return Promise.reject('error')
  })

• 在每个响应到达时，首先检查响应头中是否包含 session_time_out，若其值为 timeout，触发 Vuex 的 fedLogOut 方法。
• 检查响应数据 res 的 code 属性：
  • 如果 code 不为 0，处理各种错误情况：
    • 90001: Session 超时，返回被拒绝的 Promise。
    • 20001: 用户未登录，显示警告消息，并返回被拒绝的 Promise。
    • 70001: 权限认证错误，显示警告消息，并返回被拒绝的 Promise。
    • 其他非零 code，返回错误信息。
  • 如果 code 为 0，直接返回响应数据。
• 如果响应出错（例如请求超时），显示警告消息，并返回被拒绝的 Promise。

export default service

export default service