axios模块化使用

axios全局配置

/src/utils/axios/index.js

import axios from 'axios'  
import router from "@/router"  
import {Message} from "element-ui"  

// 全局响应处理拦截
axios.interceptors.response.use(response => {  
  return response  
}, error => {  
  if (error.response && error.response.status === 401) {  
    router.push('/login').then(() => Message({  
      message: 'Please login first.',  
      type: 'error'  
    }))  
  }  
  return Promise.reject(error)  
})  

// 全局请求处理拦截
axios.interceptors.request.use(config => {  
  config.data = commonUtil.formatFieldToSnakeCase(config.data)  
  config.params = commonUtil.formatFieldToSnakeCase(config.params)  
  return config  
}, error => {  
  return Promise.reject(error)  
})

export default axios

api模块

/src/api/login.js

import utils from "@/utils/language-trainer"  
import axios from "@/utils/axios"  
  
export default {  
  loginWithOauth(provider, successHandler, failHandler) {  
    if (provider === 'GitHub') {  
      const url = window.location.href  
      const code = utils.getUrlQueryParameter(url, 'code')  
      const state = utils.getUrlQueryParameter(url, 'state')  
  
      axios.get('api/login/oauth2/code/github?code=' + code + '&state=' + state, {  
        timeout: 5000,  
      }).then(successHandler).catch(failHandler)  
    }  
  },  
  
  formLogin(data, successHandler, failHandler) {  
    axios.post('api/formLogin', data).then(successHandler).catch(failHandler)  
  }  
}

方法调用

import loginApi from '@/api/login.js'

handleLogin() {  
  loginApi.loginWithOauth('GitHub', response => {  
    window.sessionStorage.setItem('nickname', response.data.data)  
    this.$router.push('/')  
    this.$message({  
      message: 'Login with GitHub successfully.',  
      type: 'success'  
    })  
  }, () => {  
    this.$router.push('/login')  
    this.$message({  
      message: 'Fail to login with GitHub.',  
      type: 'error'  
    })  
  })  
}