vue2封装axios接口代码

在/utils新建request

import axios from 'axios'
import bus from '@/utils/bus'
import {
    
    Message} from 'element-ui'

const service = axios.create({
    
    
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: '/api', // url = base url + request url
  timeout: 100000, // request timeout
})

service.interceptors.request.use(
  config => {
    
    
    let currentUser = JSON.parse(sessionStorage.getItem("UserInfo"))
    if (currentUser && currentUser.token) {
    
    
      config.headers['Authorization'] = 'token ' + currentUser.token
    }
    return config
  },
  error => {
    
    
    console.log(error)
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    
    
    return response
  },
  error => {
    
    
    const res = error.response.data
    const status = error.response.status
    if (status >= 500) {
    
    
        Message.error('服务繁忙请稍后再试')
    } else if (status >= 400) {
    
    
      if (res.status === 401) {
    
    
        Message.warning("您的账号登录已失效, 请重新登录")
        bus.$emit('logout')
      } else {
    
    
        Message.error("未知错误")
        console.error(error)
      }
    }
    return Promise.resolve(error)
  }
)
export default service

接口js页面中

// 卡片管理模块
import request from '@/utils/request'


// get
export function getList(params) {
    
    
  return request({
    
    
    url: '/',
    method: 'get',
    params
  })
}


// POST
export function postList(data) {
    
    
  return request({
    
    
    url: '/',
    method: 'POST',
    responseType: "arraybuffer",
    data
  })
}

vue页面

//引入
import {
    
    
  getList,
  postList
} from "@/api/comparison.js";



//使用
 getList().then((res) => {
    
    
      });