如何封装axios，并模块化

1. 安装axios

npm install axios -s

2. 导入axios

// utils/request.js
import axios from 'axios'
export const baseURL = process.env.NODE_ENV === 'production' ? 'http://wrz521.top:8080/api/' :
  'http://127.0.0.1:8080/api/'
// 实例化axios
const request = axios.create({
  baseURL, // 基准路径
  timeout: 10000
})
// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (config.url !== '/my/login') {
    config.headers.Authorization = getToken()
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  const { data } = response
  if (data.status === 401) {
    removeToken()
    router.push('/login')
  }
  return data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})
export default request

3. 使用request封装api函数

// api/user.js
import request from '@/utils/request.js'
export const login = function (username, password) {
  return request({
    url: '/api/login',
    method: 'get',
    params: {
      username,
      password
    }
  })
}

4. 在页面中调用api函数发送请求

import { login } from '@/api/user.js'
export default {
  data () {
    return {
      username: 'admin',
      password: '123456789'
    }
  },
  mounted () {
    this.onLogin()
  },
  methods: {
    async onLogin () {
      const res = await login(this.username, this.password)
      console.log(res, 'login result')
    }
  }
}