二次封装axios,可实例化不同的请求配置

二次封装axios,可实例化不同的请求配置

  • 开发过程中,一个系统可能接入不同的后台服务,需要做不同的请求头等相关配置,简易再次封装axios,可传入不同参数进行实例化多个。
import axios from 'axios';

class HttpRequest {
    constructor(options) {
        this.defaults = {
            timeout: 5000,
        }
        this.defaults = Object.assign(this.defaults, options);
    }
    interceptors(install) {
        // 拦截请求,给请求的数据头信息做一些配置
        install.interceptors.request.use(
            config => {
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        );
        // 拦截响应,给响应的数据做处理
        install.interceptors.response.use(
            res => {
                const { data, status } = res;
                return data;
            },
            err => {
                return Promise.reject(err);
            }
        );
    }
    request(options) {
        options = Object.assign(this.defaults, options)
        // 创建请求子实例
        const instance = axios.create(options) 
        this.interceptors(instance);
        return instance
    }
}

//实例化请求类,并传入不同配置参数
const request = new HttpRequest({
    baseURL: '/api',
    headers: {
        authorization: localStorage.getItem('token')
    }
});
// 调用请求方法
const http = request.request();
/**
 * 请求接口
 * @export
 * @param {Object} params 
 * @returns
 */
export async function publish(params) {
    return await http.post('/menu/publish', params);
}

你可能感兴趣的:(前端爬坑,axios)