注:只支持 get、post
基于 axios 二次封装,内置加载, 提示, 取消重复请求, 刷新 token
引入
import Http, { useHttp } from 'lg-http'
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'
}
}
)
注: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'
}
}
})
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 状态下的特殊处理 |
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
showLoading | boolean | - | 是否开启加载效果 |
showToast | boolean | - | 是否开启提示 |
isRefresh | boolean | - | 是否刷新 token |
isOptimization | boolean | - | 是否开启重复请求拦截 |
codeCallback | object | {} | 某种 code 状态下的特殊处理 |
successMessage | string | - | 成功提示文案 |
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
response | obeject | - | 请求成功结果 |
data | obeject | - | response.data |
error | obeject | - | 请求错误结果 |
loading | boolean | - | 是否加载中。默认为 true, 请求完成为 false |
finished | boolean | - | 是否请求完成。默认为 false, 请求完成为 true |