工程实践中，axios请求api应该如何较好的封装

在工程实践中，我看到很多的axios封装都是挂载在vue的原型链上的，这样的好处就是可以用vue实例去调用，但是这样是会影响效率的。而我们项目中，或者很多大厂的封装是深度解耦的且易于维护的。我平时是这样封装的，先看目录结构。

requset

     -----apiUrl.js (存放所有的api路径映射，这里可以分模块，我们已一个最简单的实践)

     -----conmon.js （公用的请求，比如post，get，delete，put等）

    ------service.js （创建axois实例，做请求和响应拦截）

api

     ------api.js (细分解耦，高度封装，统一的管理）

use.vue (演示文件)

#requset->apiUrl.js  (......代表省略)

const url = {
    login:'/login',
    ......
    ......
}
export default url

#requset->-service.js

import axios from 'axios'

//获取token
function getToken(){
    let token = sessionStorage.getItem('token') || ''; // 具体看存在哪
    return token;
}
// 创建实例
const service = axios.create({
    baseURL:'/api',
    timeout:5000 // 其他配置参照官网
});

//http request请求拦截
service.interceptors.request.use(
    config =>{
        // 具体看项目的实际情况
        if(getToken()){
            config.headers['token'] = getToken();
            config.headers['Content-Type']="application/json;charset=utf-8"
        }
        return config;
    },
    error =>{
        Promise.reject(error)
    }
) 

// http response拦截器
service.interceptors.response.use(
    response => {
        if (response.status && response.status === 200) {
            return response.data
        }
    },
    error => {
        // 注意 有些项目是统一返回200，然后自己封装了一个状态码，底下的应该放到上面做处理
        if (error.response) {
            switch (error.response.status) {
            case 401:
                // dosomething
                break
            case 404:
                 // dosomething
                break
            case 500:
                // dosomething
                break
            default:
                 // dosomething
                break
            }
        } else {
            // dosomething
        }
        return Promise.reject(error)
    }
)

export default service

#requset->-common.js

import service from './service'
export function requestPost(url,data){
    return service.post(url,data)
}

 

#api->-api.js

// （是不是觉得多此一举？），为什么在需要封装一层promise呢，因为axios放弃了finally的使用，这样封装之后就可以使用这个方法了。
import requestPost from '../request/common.js'
export function postRequest(url,data){
    return new Promise((resolve,reject)=>{
        requestPost(url,data).then(res=>resolve(res))
        .catch(error=>reject(error))
    })
}

#use.vue

import url from './request/aptUrl'
import {postRequest} from './api/api'

methods：{
    async login(){
        let parames = {
            userName:'admin',
            password:'123456'
        }
        let loginData = await postRequest(url.loginUrl,parames);// await 和 async 配套使用,推荐这样使用

        //或者使用then方式,但是也很容易陷入地狱回调 postRequest(url.loginUrl,parames).then(res=>console.log(res))
    }
}