vite+vue3 httpjs

61 阅读2分钟
import LoginConfig from '../../public/loginConfig.js'
import dayjs from 'dayjs'
console.info(LoginConfig)
// 定义状态码消息映射
const codeMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队(异步任务)。',
    204: '删除数据成功。',
    400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限(令牌、用户名、密码错误)。',
    403: '用户得到授权,但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除,且不会再得到的。',
    422: '当创建一个对象时,发生一个验证错误。',
    500: '服务器发生错误,请检查服务器。',
    502: '网关错误。',
    503: '服务不可用,服务器暂时过载或维护。',
    504: '网关超时。'
};


// 请求配置
const defaultOptions = {
    timeout: 1000 * 30, // 默认超时时间
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        // 'Authorization': localStorage.getItem("Authorization"),
        // 'pid': localStorage.getItem("pid"),
        'access-token': localStorage.getItem("access-token"),
        'traceId':(new Date).getTime()
       },
    // baseURL: process.env.VUE_APP_BASE_API || '' // 请求基地址
    
   baseURL: 'xxx'

};

// 异常拦截处理器
const errorHandler = (error) => {
    if (error.response) {
        console.log(codeMessage[error.response.status] || '未知错误');
    }
    return Promise.reject(error);
};

// 请求拦截器
const requestInterceptor = (config) => {
    const newConfig = {
        ...config
    };

    // 添加基础URL
    newConfig.url = config.url.indexOf('http')>-1?config.url:`${defaultOptions.baseURL}${config.url}`;

    // 添加token到header
    const token = sessionStorage.getItem('token');
    if (token) {
        newConfig.headers.append('Authorization', `Bearer ${token}`);
    } else {
        console.log('没有token');
    }

    return newConfig;
};

// 响应拦截器
const responseInterceptor = (response, responseType) => {
    if (response.ok) {
        console.info(response)
        switch (responseType) {
            case "json":
                return response.json();
            default:
                return response
        }


    } else {
        throw response;
    }
};
// 设置超时
let controller =null;
// 创建一个封装后的fetch函数
const fetchWrapper = (url, options = {}, responseType ) => {
    const config = requestInterceptor({
        ...defaultOptions,
        ...options,
        url
    });
    controller = new AbortController();
    
    const {
        signal
    } = controller;
    const timeoutId = setTimeout(() => controller.abort(), config.timeout);

    return fetch(config.url, {
            ...config,
            signal
        })
        .then((response) => {
            clearTimeout(timeoutId);
            return responseInterceptor(response, responseType);
        })
        .catch((error) => {
            clearTimeout(timeoutId);
            if (error.name === 'AbortError') {
                console.error('请求超时');
            }
            return errorHandler(error);
        });
};
//标准入参
const params = {
    "basicParam":{
    "serviceCode":"xxx",
    "timestamp":dayjs().format('YYYY-MM-DD HH:mm:ss SSS'),
    "token":"xxx",
    "visitType":"1",
    "version":"v1",
    "sign":"xxx",
    },
    "serviceParam":{
    },
    "attachedInfo":{}		
}
// 创建一个API客户端类
class APIClient {
    get(url, options = {}, responseType = 'json') {
        return fetchWrapper(url, {
            ...options,
            method: 'GET',
            responseType
        });
    }

    post(url, body, responseType= 'json',basicParam=true, options = {} ) {
        params.serviceParam = body
        return fetchWrapper(url, {
            ...options,
            method: 'POST',
            body: JSON.stringify(params),
        },
        responseType);
    }

    put(url, body, options = {}) {
        return fetchWrapper(url, {
            ...options,
            method: 'PUT',
            body: JSON.stringify(body)
        });
    }

    delete(url, options = {}) {
        return fetchWrapper(url, {
            ...options,
            method: 'DELETE'
        });
    }
    abort(){
        controller.abort("中止")
        controller = null;
    }
}
export default new APIClient();