基于axios的二次封装

在axios的基础上进行二次封装以方便调用接口以及统一管理接口

封装内容

首先创建了一个axios的实例，为了方便扩展，所以这个实例没有设置任何初始值。

const instance = axios.create()

请求拦截器

//请求前进行拦截并处理
instance.interceptors.request.use((config) => {
	//项目上一般会使用后台返回的token作为请求的参数之一，所以在请求拦截器中统一添加了该内容
    config.headers['token'] = sessionStorage.getItem('token') || '';
    return config
}, error => {
    console.log(error);
    return Promise.reject(error);
})

响应拦截器

//请求前进行拦截并处理
instance.interceptors.response.use(response => {
	//对返回状态为200的正常返回数据处理
    if(response.status === '200' || response.status === 200) {
    	//如果code为0 （一般是这么设置具体设置以实际为准）
        if(!response.data.code) {
            return Promise.resolve(response.data.data);
        }else {
        	//这个1000是我自己项目常用的设置（以实际为准）
            if(response.data.code === '1000' || response.data.code === 1000) {
                // 1000为token失效或者错误进行重定向登录
                //antd的message组件提示
                message.error(response.data.message);
                window.location.href('/login');
            }else {
             	//antd的message组件提示
                message.error(response.data.message);
                throw Promise.reject(response.data.message);
            }
        }
    }else {
        message.error(response.data.message);
        return Promise.reject(response.data.message);
    }
}, error => {
    return Promise.reject(error);
})

请求

单独get请求

export const getRequire = (url, params, config ={}) => {
    return new Promise((resolve, reject) => {
        instance.get(url, params).then(response => resolve(response)).catch(error => reject(error));
    })
}

单独post请求

export const postRequire = (url, params, config={}) => {
    return new Promise((resolve, reject) => {
        instance.post(url, params).then(response => resolve(response)).catch(error => reject(error));
    })
}

整合请求

在这里可以不断添加各个特殊请求，如postjson、formData等多种特殊请求

export const requireApi = (values, params, config = {}) => {
	// 默认是post请求
    const { url = '', baseUrl = '', type = 'post' } = values;
    let realUrl = baseUrl + url;
    switch(type) {
        case 'post': return new Promise((resolve, reject) => {
            instance.post(realUrl, params).then(response => resolve(response)).catch(error => reject(error));
        })
        case 'get': return new Promise((resolve, reject) => {
            instance.get(realUrl, { params }).then(response => resolve(response)).catch(error => reject(error));
        })
        default:  return new Promise((resolve, reject) => {
            instance.get(realUrl, { params }).then(response => resolve(response)).catch(error => reject(error));
        })
    }
}

接口统一管理

项目基准请求路径

如果有外部项目引入则可以多设置几个基准请求路径

const baseUrl = '/test'

项目中请求接口

//例子如下
export const apis = {
    // <--------------------------------------- 登录页 ---------------------------------->
    // 测试服务器端连接是否正常
    testConnect: { baseUrl: baseUrl, url: '/data/testConnect', type: 'get' },
    // 获取token
    getToken: { baseUrl: baseUrl, url: '/data/getToken', type: 'get' },
}

使用方法

在页面上请求接口访问数据

//无参数
requireApi(apis.testConnect).then(() => {
	console.log(`服务器端通讯正常`);
}).catch(error => {
    console.log(`服务器端通讯异常`);
})
//带参数与返回值
requireApi(apis.getUserToken, params).then(value => {
	console.log(value);
}).catch(err => {
	console.log('请求异常');
})