axios封装-不是原创

1、封装思路

思路是我们老师给我提供的，也是他自己实现的，然后跟我说的。
主要思路就是在把所有的api都放入一个文件，然后在那个文件统一把api导出，然后在main.js中注册到全局。下面图示表示得很清楚，椭圆那里就是提供了axios的基本参数和设置，如：请求、响应拦截器，baseUrl、响应时长等，然后把axios抛出。每写一个api都引入一个axios，然后把这些api都放入一个文件统一管理，再抛出去。后面维护的时候我们直接对统一导出这个文件进行维护就行了

2、实现

1、axios文件

import axios from "axios"
import {message} from 'ant-design-vue'
axios.defaults.baseURL = 'http://localhost:8999/'
axios.interceptors.request.use(
    config => {
    	// 这里根据个人需要，随便来
        if(localStorage.getItem('TOKEN')){
            config.headers.TOKEN = localStorage.getItem('TOKEN')
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

axios.interceptors.response.use(
    response => {
        const res = response.data
        // 下面的想怎么来怎么来
        switch(response.status) {
            case 200:
                return res
            case 500: 
                message.error('系统错误，错误码：500')
                break;
            default:
                message.error(`未知错误，错误码：${response.status}`)
        }
    },
    error => {
        return Promise.reject(error)
    }
)

export default axios

2、具体的api

关于用户的api
import axios from "./axios"
export default {
    // 获取所有的用户
    getUsers: () => {
        return axios({
            method: 'get',
            url: 'api/user'
        })
    },
    // 登录
    login: (params = {}) => {
        return axios({
            method: 'post',
            url: 'api/user/login',
            data: params
        })
    }
}

import axios from './axios'

export default {
    // 获取所有的微博
    queryComment: (data = {}) => {
        return axios({
            method: 'get',
            url: 'api/comment',
            params: data
        })
    }
}

3、引入统一管理

// 请求的api统一管理
import user from './userApi'
import comment from './commentApi'
// 下面可以分环境打包
export const api = {
    userApi: user,
    commentApi: comment
}

4、注册全局

在main.js中，api文件夹是跟main.js同一个目录下
import {api} from './api/api'
Vue.prototype.$api = api

5、使用用户的登录

随便创一个vue

<script>
export default {
    created(){
        this.$api.userApi.login({
            account: '123',
            password: '12'
        }).then(
            res => {
                console.log(res)
            },
            rej => {
                console.error(rej)
            }
        )
    }
}
</script>