vue axios二次封装的详细解析

  npm i axios    //下载axios

export default{
baseUrl:{
dev: "http://localhost:8082/mhy",	//开发环境
pro: "http://xxx.xx.xx.xx:8082/mhy",	//上线环境
}
}

import axios from "axios"
import config from "@/config"

// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro
const baseUrl = config.baseUrl.pro
class HttpRequest{
    //构造器
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }
    //请求路径设置
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            Header:{}
        }
        return config
    }

    //添加拦截器
    interceptors(instance){
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            const token = localStorage.getItem("Accept-Token");
            if(token !== null && token !== ""){
                config.headers["Accept-Token"] = token;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            // console.log('添加请求拦截器 请求错误')
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            // console.log('添加请求拦截器 响应')
            return response;
        }, function (error) {
            // 对响应错误做点什么
            // console.log('添加请求拦截器 响应错误')
            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 uploadImgAPI = (param) => {
    return axios.request({
        url: `/uploadImg/${param.id}`,
        method: "post",
        data: param.formData
    })
}
// 删除一个文件
export const deleteImgAPI = (param) => {
    return axios.request({
        url: `/deleteImg`,
        method: "post",
        data: param
    })
}

import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'