axios企业级三层封装方法 纯手写 解决回调地狱 设置请求拦截器

// 最底层封装 get和post 设置默认地址 请求拦截器 响应拦截器
import axios from "axios"
import qs from "qs"		后台java写不用转,如果php/node,不转就拿不到后台参数,安装axios就自动配置qs


// 引入路由文件
import router from "@/router"
import local from "@/utils/local"
// 引用ui框架
import {Message} from "element-ui"

//设置请求拦截器
axios.interceptors.request.use((config)=>{
		let tk =localStorage.get('token'); 
		//判断 如果token存在，设置在请求头中
		if(tk){			//如果tk存在，往下执行 不存在就停止 return
			config.headers.Authorization=tk;
		}
		return config;
}

// 设置响应拦截器
axios.interceptors.response.use((config) => {
    let {code,msg } = config.data;
    // 如果code和msg不存在，说明访问的是列表数据
    if( code !== undefined && msg !== undefined ){
        // 在响应到数据后，直接在拦截器中处理
        if( code === 0 ){
            // 弹出成功提示框
            Message({
                type: "success",
                message: msg
            })
        }else if( code === "00" || code === "11" ){
            // 不做任何操作 让检测密码不要弹弹窗
        }else{
            Message.error(msg)
        }
    }
    return config;
},(res)=>{
    // 如果在响应结果拿到后 code为401 说明是无效的token 退出登录
    if( res.response.data.code == 401 ){
        // 退出后 
        router.push("/login")
        // 清空错误的token
        local.clear();
    }
})

// 设置默认地址
axios.defaults.baseURL = "http://127.0.0.1:5000"

//axios没有真正的解决掉回调地狱，axios也是基于Promise封装的，为了方便使用，所以封装

export default{
    //封装get请求
    get(url,params){
        return new Promise((resolve,reject)=>{
            axios.get(url,{params})
            .then((res)=>{
                resolve(res)
            })
            .catch((erro)=>{
                reject(erro)
            })

        })
    },
    //封装post请求
    post(url,params){
        return new Promise((resolve,reject)=>{
            axios.post(url,qs.stringify(params))//额外注意,java写的后台不需要qs
            .then((res)=>{
                resolve(res)
            })
            .catch((erro)=>{
                reject(erro)
            })
        })
    }
}
=================================================
//中间层
	import req from "@/utils/req" //引入底层文件
1、没有参数的get获取方式
	export function goodsType_api() {
	    return req.get("/goods/categories");
	}
2、有参数的get获取方式
	export function accList_api(params){
	    return req.get("/users/list",params);
	}
3、post的获取方式
	export function goodsAdd_api(params){
    	return req.post("/goods/add",params);
	}
=================================================
//视图层
	import {goodsType_api} from "@/apis/acc.js"	//引入
	async created(){						//函数前加上async
          let res= await goodsType_api()//直接变量接收即可,参数前加上await
          console.log(res);
        }
=================================================