【Element UI】axios 与 request.js配置

request.js文件

import axios from 'axios'
import { MessageBox } from 'element-ui'

const service = axios.create({
  baseURL: 'http://127.0.0.1:8000/',
  timeout: 5000 # 这里如果你的数据超过几十万条，需要时间长度的话 简直直接注释
})

// 拦截器
service.interceptors.request.use(config => {
  if (window.sessionStorage.getItem('token')) {
    config.headers.authenticate = window.sessionStorage.getItem('token')
  }
  return config
}
)

// 响应器
service.interceptors.response.use(
  // 返回值
  response => {
    const res = response
    if (parseInt((res.data.code)) === 10014) {
      MessageBox.confirm('请联系管理员反馈情况', '请求异常', {
        confirmButtonText: '我知道了',
        type: 'error'
      })
    } else {
      return res
    }
    return res
  },
  // 403 
  error => {
    const res = error
    MessageBox.confirm('请退出账号并重新登录账号', '登录信息失效', {
      confirmButtonText: '好的',
      type: 'error'
    })
    return res
  }
)

export default service

api.js 文件

import request from '@/utils/request.js'

// 登陆
export function loginUser (data) {
  return request({
    url: 'api/login',
    method: 'post',
    data
  })
}

 

 // 获取进入登录

    OrderTotal () {

      OrderTotalGet().then((res) => {

        this.todayTotal = res.data.data

      }).catch(_error => {

        this.logout()  // 如果403 就退出账号

      })

    },

    // 退出账号

    logout () {

      window.sessionStorage.clear()

    },

请求组件使用


// 请求组件
import { loginUser } from '@/api/user.js'


 // 登录
    Login () {
      var datas = {
        username: this.login.username,
        password: this.login.password
      }
      loginUser(datas).then((res) => {
        console.log('登录', res)
      })
    },