vue2封装axios接口代码

@toc

在/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) =>
 {

      }
    );
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！