vue2封装axios接口代码

@toc

在/utils新建request

代码语言：shell复制

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页面中

代码语言：shell复制

// 卡片管理模块
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页面

代码语言：shell复制

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



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

vue.js

0 人点赞