Vue封装axios

86 阅读1分钟

新建2个jS

image.png

index.js
         import axios from 'axios'
        /* 创建xaios实例化对象 instance*/
        var instance = axios.create({
            /* 基础路径 */
            baseURL: '..............',
            /* 设置超时事件 */
            timeout:3000,
        });
        // 请求拦截器
        instance.interceptors.request.use(
            config=>{
            
                // 每次发送请求之前判断是否存在token // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
                localStorage.token && (config.headers.Authorization=localStorage.token)
                return config
        }, error=>{
            return Promise.reject(error);
        });
        // 响应拦截器
        axios.interceptors.response.use(function (response) { 
            return response;
        }, function (error) {
            return Promise.reject(error);
        });

        /*参数methdos默认值是get,path表示具体路径,
        post需要给data传参默认值是空对象,
        get请求需要给params传参默认值是空对象*/ 
        export const httpSever=(path,params={},method='get',data={})=>{
            return new Promise((resolve,reject)=>{
                instance({
                    url:path,
                    params,
                    method,
                    data,
                })
                .then(res=>{
                    resolve(res)
                })
                .catch(err=>{
                    reject(err)
                })
            })
        }
        
  request.js
        import {httpSever} from '@/http/index.js'
        /* 登录 */
        export const loginPost =(path,data)=>httpSever(path,{},'post',data)
        /* 用户列表 */
        export const userGet =(path,params)=>httpSever(path,params)
        /* 左侧菜单 */
        export const menusGet =(path,params)=>httpSever(path,params)
        

调用

image.png

image.png