axios封装

axios封装

1. 简单封装：

import axios from "axios";
import config from "../config"

const baseUrl = process.env.Node_env === 'development' ? config.baseUrl.dev :config.baseUrl.pro

class HttpRequest {
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }
    getInsideConfig(){
        const config = {
            baseUrl:this.baseUrl,
            header: {}
        }
        return config;
    }
    // 核心--拦截器
    interceptors(instance){
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            return response;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
    }
    // 核心--请求
    request(options){
        const instance = axios.create();
        options = { ...this.getInsideConfig(), ...options };
        this.interceptors(instance);
        return instance(options);
    }
}


export default new HttpRequest(baseUrl)

调用的时候：

import axios from './axios'
// 接口方法
export const getMenu = (params) => {
    return axios.request({
        url: '/permission/getMenu',
        method: 'post',
        data: params
    })
}