封装axios

80 阅读1分钟

创建一个axios实例化对象instance

var instance = axios.create({
    /* 基础路径 */
    baseURL: 'https://lianghj.top:8888/api/private/v1/',
    /* 设置超时时间 */
    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.error(error)
    })

响应拦截器

axios.interceptors.response.use(response => {
    return response
  }, error => {
    return error
  })

参数methdos默认值是get,path表示具体路径,post需要给data传参默认值是空对象, get请求需要给params传参默认值是空对象

export const httpServe = (path, params = {}, method = 'get', data = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            url: path,
            params,
            method,
            data
        })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}
/*这种调用的写法 必须要按照顺序 */
/* get请求的调用方法 */
/* httpServe('users',{name:'zhangsan'}) */
/* post请求的调用方法 */
/* httpServe('login',{},'post',{username:'admin',password:'123123'})  */

调用

import {httpServe} from '@/http/index.js'

/* 登录 */
export const loginPost = (path,data)=> httpServe(path,{},'post',data);
/* 左侧菜单列表 */
export const menusGet = (path,params)=> httpServe(path,params);
/* 用户列表 */
export const usersGet = (path,params)=> httpServe(path,params);
/* 添加用户 */
export const addusersPost = (path,data)=> httpServe(path,{},'post',data);