在实际开发过程中axios的使用前一般都会封装一下，方便全项目使用，以下一个简单的axios封装的实例

serve.js

一个简单的axios封装

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

// 创建实例
const axiosInstance = axios.create({
  // 请求域名
  baseURL: 'xxx', 
  // 设置超时时间
  timeout: 1000 * 30,
  // 请求头
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const token = 'xxx' // 登录后生成用于识别用户身份，项目不需要直接去掉
    config.headers['Authorization'] = token || ''
    return config
  },
  error => {
    console.error('error: ', error)
    Promise.reject(error)
  }
)

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    if (response.status === 200) { //根据后端定义响应状态进行相应的处理,例：1数据返回成功，2未登录
      if (response.data && response.data.code === 2) { 
       // router.push({ name: '登录'})
      } else if (response.data && response.data.code !== 1) {
        Message.error(response.data.msg)  // 数据异常提示
      }
      return response.data
    } else {//数据异常处理
		Message.info(JSON.stringify(response.status)) 
    	return response.data
	}
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default axiosInstance

api.js

封装的所有接口请求

import serve from './serve '

export const login = (params) => serve.post('/api/login', params)
export const getUser = (params) => serve.get('/api/userInfo', { params })

index.vue

页面调用

<template>
	<div class="container">
		登录页
	</div>
</template>

<script>
import { login } form './api'

export default {
	created(){
		const params = {
			aaa: 'xxxxxx',
			bbb: 'xxxxxx'
		}
		login(params).then((res) => {
			console.log(res)
		})
	}
}
</script>