JBolt Admin Vue

Appearance

请求相关API ​

API ​

接口定义说明
JBoltApi.getget<T = ResData>(url: string,data?: any,config?: Api.RequestConfig): Promise<Api.Result<T>>发起get请求
JBoltApi.tryGettryGet<T = ResData>(url: string,data?: any,config?: Api.RequestConfig): Promise<T>发起get请求
JBoltApi.postpost<T = ResData>(url: string,data?: any,config?: Api.RequestConfig): Promise<Api.Result<T>>发起post请求
JBoltApi.tryPosttryPost<T = ResData>(url: string,data?: any,config?: Api.RequestConfig): Promise<T>发起post请求
JBoltApi.downloaddownload(url: string, filename: string,data?: any, config?: Api.RequestConfig):Promise<void>下载文件

参数说明 ​

参数名类型说明
urlstring请求地址
dataany请求参数，get请求会将参数以 url参数的形式发送
configRequestConfig请求配置，参考axios配置参数 。另外加了两个特殊配置：
ignoreMsg: 正常情况下接口返回的数据包含有效msg，就会弹提示框显示。如果你不想弹窗显示，就可以通过该配置项，将值设为false阻止默认的信息提示框。
key: 有的时候我们需要阻止用户重复发起某个请求，比如文章上的点赞按钮，用户短时间内狂点，我们也要保证同一时刻只能发起一个请求，请求处理完才可以继续发起第二个请求。这时候就可以通过传入一个自定义的标识字符串key，框架会保证同一时刻，同一个key值的请求只有一个会被处理，其他会忽略

返回值 ​

返回一个{error:RequestError, result: T}结构的ServiceResult对象，判断是否发生异常了，通过error是否为null来判断，不需要try catch。result就是接口正常响应的数据。

类型说明： ​

ts

declare namespace Api {
    /**
     * 请求结果封装
     */
    interface Result<T = any> {
        /**
         * 请求是否发生异常，如果为null，说明没有异常
         */
        error: Error | null
        /**
         * 响应数据
         */
        result: T
    }

    /**
     * 请求配置
     */
    interface RequestConfig extends AxiosRequestConfig {
        /**
         * 如果后端接口返回的数据中有msg属性值，默认会通过提示框显示。
         * 如果你不希望某个弹出提示框，可以通过该配置项，将值设为false阻止默认的信息提示框。
         */
        ignoreMsg?: boolean
        /**
         * 同一时间，同一个key的请求会阻止并发。
         * 比如文章上的点赞按钮，用户短时间内狂点，我们要保证同一时刻只能发起一个请求，
         * 请求处理完才可以继续发起第二个请求。这时候你就可以通过
         * 传入一个自定义的标识字符串key，例如 {key:`article_favor_${article.id}`}
         * 框架会保证同一时刻，同一篇文章的点赞请求只有一个会被执行，其他会忽略
         */
        key?: string
        /**
         * 跳过默认的拦截器处理
         */
        skipInterceptor?: boolean
        /**
         * 跳过默认的请求拦截器处理。
         * 默认的请求拦截器中会在header中填充token等jbolt特有字段
         * 也会根据contentType对data做响应处理。
         * 如果你想自己处理，可以通过该配置项，将值设为true阻止默认的请求拦截器处理。
         */
        skipRequestInterceptor?: boolean

        /**
         * 跳过默认的响应拦截器处理。
         * 默认的响应拦截器会自动更新token，根据JBolt响应数据特征做响应处理。
         * 如果你想自己处理，可以通过该配置项，将值设为true阻止默认的响应拦截器处理。
         */
        skipResponseInterceptor?: boolean
        /**
         * 响应时做什么，先执行它，再执行默认逻辑
         * @param response
         */
        onResponse?: (response: AxiosResponse) => void
    }
}

/**
 * 后台一般接口返回的响应数据结构
 */
interface ResData<T = any> {
    code?: number
    msg?: string
    data?: T
    [key: string]: any
}
/**
 * 后台分页查询接口返回的响应数据结构
 */
interface PageData<T = any> {
    code?: number
    msg?: string
    data: {
        firstPage: boolean //是否第一页
        lastPage: boolean //是否最后一页
        list: T[] //数据列表
        pageNumber: number //当前页码
        pageSize: number //每页条数
        totalPage: number //总页数
        totalRow: number //总条数
    }
    [key: string]: any
}

declare namespace Api {
    /**
     * 请求结果封装
     */
    interface Result<T = any> {
        /**
         * 请求是否发生异常，如果为null，说明没有异常
         */
        error: Error | null
        /**
         * 响应数据
         */
        result: T
    }

    /**
     * 请求配置
     */
    interface RequestConfig extends AxiosRequestConfig {
        /**
         * 如果后端接口返回的数据中有msg属性值，默认会通过提示框显示。
         * 如果你不希望某个弹出提示框，可以通过该配置项，将值设为false阻止默认的信息提示框。
         */
        ignoreMsg?: boolean
        /**
         * 同一时间，同一个key的请求会阻止并发。
         * 比如文章上的点赞按钮，用户短时间内狂点，我们要保证同一时刻只能发起一个请求，
         * 请求处理完才可以继续发起第二个请求。这时候你就可以通过
         * 传入一个自定义的标识字符串key，例如 {key:`article_favor_${article.id}`}
         * 框架会保证同一时刻，同一篇文章的点赞请求只有一个会被执行，其他会忽略
         */
        key?: string
        /**
         * 跳过默认的拦截器处理
         */
        skipInterceptor?: boolean
        /**
         * 跳过默认的请求拦截器处理。
         * 默认的请求拦截器中会在header中填充token等jbolt特有字段
         * 也会根据contentType对data做响应处理。
         * 如果你想自己处理，可以通过该配置项，将值设为true阻止默认的请求拦截器处理。
         */
        skipRequestInterceptor?: boolean

        /**
         * 跳过默认的响应拦截器处理。
         * 默认的响应拦截器会自动更新token，根据JBolt响应数据特征做响应处理。
         * 如果你想自己处理，可以通过该配置项，将值设为true阻止默认的响应拦截器处理。
         */
        skipResponseInterceptor?: boolean
        /**
         * 响应时做什么，先执行它，再执行默认逻辑
         * @param response
         */
        onResponse?: (response: AxiosResponse) => void
    }
}

/**
 * 后台一般接口返回的响应数据结构
 */
interface ResData<T = any> {
    code?: number
    msg?: string
    data?: T
    [key: string]: any
}
/**
 * 后台分页查询接口返回的响应数据结构
 */
interface PageData<T = any> {
    code?: number
    msg?: string
    data: {
        firstPage: boolean //是否第一页
        lastPage: boolean //是否最后一页
        list: T[] //数据列表
        pageNumber: number //当前页码
        pageSize: number //每页条数
        totalPage: number //总页数
        totalRow: number //总条数
    }
    [key: string]: any
}

JBoltApi.get ​

发起一个get请求，并带参数。get的返回值是Promise<Result>类型对象，包含error和result两个属性。error代表本次请求发生的异常信息，如果请求成功，error=null。result为响应数据。

ts
const {error, result } = await JBoltApi.get(
    '/api/admin/userConfig',
    {keywords:'', type: 1});
if (error) {
    return
}
console.debug(result)
const {error, result } = await JBoltApi.get(
    '/api/admin/userConfig',
    {keywords:'', type: 1});
if (error) {
    return
}
console.debug(result)

发起一个get请求，并限制并发

ts
const {error, result } = await JBoltApi.get('/api/admin/userConfig',null, {key:'config_style'});
if (error) {
    return
}
console.debug(result)
const {error, result } = await JBoltApi.get('/api/admin/userConfig',null, {key:'config_style'});
if (error) {
    return
}
console.debug(result)

JBoltApi.tryGet ​

接口定义：

ts
async function tryGet<T = ResData>(url: string, data?: any, config?: RequestConfig):Promise<T>
async function tryGet<T = ResData>(url: string, data?: any, config?: RequestConfig):Promise<T>

用法基本同JBoltApi.get，区别在于返回值。tryGet返回的是Promise<响应数据>。需要自己通过catch捕获异常信息。使用get还是tryGet取决于编码习惯。

示例代码 ​

ts
JBoltApi.tryGet('/api/admin/dept/enableOptions').then(res => {
    deptData.value = res.data
}).catch(e => {
    console.error(e)
})
JBoltApi.tryGet('/api/admin/dept/enableOptions').then(res => {
    deptData.value = res.data
}).catch(e => {
    console.error(e)
})

post请求 JBoltApi.post、JBoltApi.tryPost ​

用法同JBoltApi.get、JBoltApi.tryGet，只是请求方法不同而已。