axios接口统一分装

第一步

在utils文件夹中创建request.js文件

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
import { getAccessToken } from '@/utils/xl-auth'

const service = axios.create()

service.interceptors.request.use(
  config => {
    // 发送请求
    if (store.getters.accessToken && store.getters.tenant) {
      config.headers['Authorization'] = getAccessToken()
      config.headers['Client'] = ''
      config.headers['Tenant'] = store.getters.tenant
    }
    if (store.getters.parkingWebEndpoint) {
      config.baseURL = 'api/parking/'
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    let message = ''
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          if (error.response.data.message) {
            message = error.response.data.message
          }
          break
        case 401:
          message = '登录已过期'
          store.dispatch('user/resetToken').then(() => {
            router.push('login')
          })
          break
        case 404:
          message = '找不到数据'
          break
        case 500:
          message = error.response.data.error
          break
        case 428:
          message = error.response.data.message
          break
        default:
          message = error.response.status
          break
      }
    } else {
      message = '请求超时'
    }
    if (message) {
      Message({
        message,
        type: 'warning',
        duration: 3 * 1000
      })
    }

    return Promise.reject(error)
  }
)

export default service

第二步

在api文件夹中创建模块接口js文件
例如：user.js

import request from '@/utils/request'
export function getrolelist(params) {
  return request({
    url: 'roles',
    method: 'get',
    params
  })
}
export function changerule(data) {
  return request({
    url: 'role/addOrUpdate',
    method: 'post',
    data
  })
}

第三步

使用

import {getrolelist,changerule} from '@/api/user.js'
export default {
	methods:{
		async handleGetData (){
			const res=await getrolelist()
			// ...对数据进行操作
		}
	}
}