记一次axios封装

背景

因业务需,在项目对axios进行了封装

封装

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 请求超时时间
})

// request 拦截器
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      config.headers['Token'] = getToken() // 让每个请求携带token
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
     /**
     * code为非'1'是抛错
     */
    # const res = response.data
    # if (res.code !== '1') {
    #   if (res.code !== '-2') {
    #     Message({
    #       message: res.msg,
    #       type: 'error',
    #       duration: 5 * 1000
    #     })
    #   }

    #   // '-1' token失效;
    #   if (res.code === '-1') {
    #     store.dispatch('FedLogOut').then(() => {
    #       location.reload() // 为了重新实例化vue-router对象 避免bug
    #     })
    #   }
    #   // '-2' 授权过期
    #   if (res.code === '-2') {
    #     window.open(res.data.redirectUrl, '_blank')
    #   }
    #   return Promise.reject('error')
    # } else {
    #   return response.data
    # }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

使用

import request from '@/utils/request'

export function login(userName, password) {
  return request({
    url: '/login',
    method: 'post',
    data: {
      userName,
      password
    }
  })
}