lg-http

注：只支持 get、post

介绍

基于 axios 二次封装，内置加载, 提示, 取消重复请求, 刷新 token

使用

引入

import Http, { useHttp } from 'lg-http'

演示 1

import Http from 'lg-http'
/*
 * option option配置属性
 */
const $http = new Http(option)
/*
 * url 接口地址
 * data 接口参数
 * attaches attaches配置属性
 * axiosConfig axios配置属性
 */
$http
    .get(url, data, attaches, axiosConfig)
    .then((result) => {})
    .catch((error) => {})

$http.get(
    '/login',
    {
        account: 'admin',
        password: '123456'
    },
    {
        showLoading: false,
        showToast: false,
        codeCallback: {
            400: (result) => {
                console.log(result)
            }
        }
    },
    {
        header: {
            'Content-Type': 'application/json'
        }
    }
)

演示 2

注：useHttp 只适用 Vue3

根据 loading , 方便处理独立的加载效果

import {
    useHttp
} from 'lg-http'

/*
 * option option配置属性
 * url 接口地址
 * data 接口参数
 * attaches attaches配置属性
 * axiosConfig axios配置属性
 * return resultAttr useHttp结果属性
 */
const resultAttr = useHttp(option, {
    url,
    data,
    attaches,
    axiosConfig
})

const {
    response,
    data,
    error,
    loading
} = useHttp(option, {
    '/login',
    {
        account: 'admin',
        password: '123456'
    },
    {
        showLoading: true,
        showToast: false,
        codeCallback: {
            400: (result) => {
                console.log(result)
            }
        }
    },
    {
        header: {
            'Content-Type': 'application/json'
        }
    }
})

option 配置属性

| 属性名 | 类型 | 默认值 | 说明 | | ------------------------ | ---------------- | --------------------------------------- | -------------------------- | | baseURL | string | - | axios baseURL | | timeout | number | 20000 | axios timeout | | headers | object | {} | axios headers | | showLoading | boolean | true | 是否开启加载效果 | | loadingMethods | object | {open: console.log, close: console.log} | 加载效果的配置 | | showToast | boolean | true | 是否开启提示 | | toastMethods | function, object | console.log | 提示配置 | | isRefresh | boolean | false | 是否刷新 token | | refreshRequestAssert | function | (res)=>res.code===401 | 刷新 token 的状态 | | refreshRequest | () => Promise | - | 刷新 token 的函数 | | isOptimization | boolean | false | 是否开启重复请求拦截 | | successRequestAssert | function | (res)=>res.success | 请求正确的状态 | | defaultErrorToastMessage | string | '服务异常，请重新再试' | 错误提示文案 | | codeCallback | object | {} | 某种 code 状态下的特殊处理 |

attaches 配置属性(可选)

| 属性名 | 类型 | 默认值 | 说明 | | -------------- | ------- | ------ | -------------------------- | | showLoading | boolean | - | 是否开启加载效果 | | showToast | boolean | - | 是否开启提示 | | isRefresh | boolean | - | 是否刷新 token | | isOptimization | boolean | - | 是否开启重复请求拦截 | | codeCallback | object | {} | 某种 code 状态下的特殊处理 | | successMessage | string | - | 成功提示文案 |

axios 配置属性

axios 官网

useHttp 结果属性

| 属性名 | 类型 | 默认值 | 说明 | | -------- | ------- | ------ | ------------------------------------------- | | response | obeject | - | 请求成功结果 | | data | obeject | - | response.data | | error | obeject | - | 请求错误结果 | | loading | boolean | - | 是否加载中。默认为 true, 请求完成为 false | | finished | boolean | - | 是否请求完成。默认为 false, 请求完成为 true |