Ajax 库

基于 axios 二次封装

基础方法

• get 一般用于获取服务器资源
• post 一般用于保存资源到服务器
• put 一般用于修改服务器资源
• del 一般用于删除服务器上的资源
• patch 一般用于部分修改服务器资源，很少用得到
• download 下载文件，后端要设置headers参考如下：

  content-disposition: attachment;fileName=xxx.txt
  content-type: application/octet-stream;charset=UTF-8

所有方法接受三个参数，url,params,options

示例：

import Ajax from '@ra-lib/ajax';

const ajax = new Ajax();

setLoading(true);
ajax.get('/url', params, options)
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err);
    })
    .finally(() => {
        setLoading(false);
    });

Ajax构造函数参数

其他参数参见axios

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | onSuccess | 成功回调，一般用于提供统一成功提示 | function | () => void 0 | | onError | 失败回调，一般用于提供统一错误提示 | function | () => void 0 | | reject | promise是否进行reject，如果为false，promise将不会reject，出错结果为：{$type: 'unRejectError', $error: err} | boolean | true | | noEmpty | 是否去掉空参数 '' null undefined不发送给后端 | boolean | true | | trim | 对象参数第一层数据是否去空格 | boolean | true | | deleteUseBody | delete方法使用使用body传递参数，默认query方式 | boolean | false |

具体方法options

其他参数参见axios

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | reject | 同构造函数参数 | boolean | true | | noEmpty | 同构造函数参数 | boolean | true | | trim | 同构造函数参数 | boolean | true | | deleteUseBody | 同构造函数参数 | boolean | false | | successTip | 成功提示，默认不触发onSuccess | string | false | | errorTip | 失败提示，默认触发onError | string | - | | originResponse | 是否返回相应的原始对象，一般用到完整的响应结果场景会用到 | boolean | false | | fileName | download方法专用，下载文件名称 | string | - |

ajax初始化

一般使用时，会在项目的src/commons/ajax.js文件中，对Ajax进行实例化，设置一些默认值等

import Ajax, {createHooks, createHoc} from '@ra-lib/ajax';
import {AJAX_PREFIX, AJAX_TIMEOUT} from 'src/config';
import handleError from './handle-error';
import handleSuccess from './handle-success';
import {getLoginUser} from './index';

// token来源
const token = getLoginUser()?.token || window.sessionStorage.getItem('token');

// 创建Ajax实例，设置默认值
const ajax = new Ajax({
    baseURL: AJAX_PREFIX,
    timeout: AJAX_TIMEOUT,
    headers: {token}, // 全局headers设置
    onError: handleError,
    onSuccess: handleSuccess,
});

const hooks = createHooks(ajax);
const hoc = createHoc(ajax);

const instance = ajax.instance;
// 请求拦截
instance.interceptors.request.use(cfg => {
    // Do something before request is sent
    return cfg;
}, error => {
    // Do something with request error
    return Promise.reject(error);
});

// 响应拦截
instance.interceptors.response.use(res => {
    // Do something before response

    // 后端自定义失败，前端直接抛出，走handleError逻辑
    // if (res?.data?.code !== '00') return Promise.reject(res.data);

    return res;
}, error => {
    // Do something with response error
    return Promise.reject(error);
});


export default ajax;

export const ajaxHoc = hoc;

export const get = ajax.get;
export const post = ajax.post;
export const put = ajax.put;
export const del = ajax.del;
export const patch = ajax.patch;

export const useGet = hooks.useGet;
export const usePost = hooks.usePost;
export const usePut = hooks.usePut;
export const useDel = hooks.useDel;
export const usePatch = hooks.usePatch;

hooks

提供了简单的hooks封装

refreshDeps 和 initOptions为可选参数，可以任意传递一个或多个或不传递

// 返回：ajax调用方法、loading状态、响应数据、响应错误
const {run, loading, data, error} = useGet('/users', initParams, refreshDeps, initOptions);

// 一般情况下，调用时，传递参数即可，run方法返回结果(promise)
const data = await run(params);

// 如果传递options，将与定义时的initOptions合并 {...initOptions, ...options}
// 如果传递 对象 params，将与定义时initParams合并 {...initParams, ...params}
await run(params, options);


// url携带参数的情况
const {run, loading, data, error} = useDel('/users/:id', initParams, refreshDeps, initOptions);

// 单个站位参数，可以直接传递数据，多个要传递对象，key与url中的对应
await run(1);

// key 要与url中的对应
await run({id});

initOptions说明

如果为函数，则等同于 formatResult；

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | formatResult | 相应结果处理函数 | function | res => res | | formatError | 相应结果错误处理函数 | function | error => error | | setLoading | loading状态设置函数，一般用于一个页面多个请求共享一个loading情况 | function | - | | mountFire | 组件初始化，是否触发查询 | boolean | true |

常用示例：

// 获取角色列表、conditions, pageNum, pageSize 数据改变，自动触发查询
const {
    data: {
        dataSource,
        total,
    },
} = props.ajax.useGet('/roles', params, [conditions, pageNum, pageSize], {
    // mountFire: false, // 初始化不查询
    formatResult: res => {
        return {
            dataSource: res?.list || [],
            total: res?.total || 0,
        };
    },
});

// 批量删除，主动调用 batchDelete 方法，触发请求
const {run: batchDelete} = props.ajax.useDel('/roles', null, {successTip: '批量删除成功！'});

async function handleDelete(id) {
    await batchDelete({ids: id}, {successTip: '删除成功！'});
}

// ajax下载文件
async function handleDownload() {
    // method 默认 get
    // fileName 默认从响应header中获取
    props.ajax.download('/download', null, {method: 'post', fileName: 'README.md'});
}

headers设置

全局headers设置

创建ajax实例时（一般在src/commons/ajax.js文件中），进行headers全局设置

// 创建Ajax实例，设置默认值
const ajax = new Ajax({
    baseURL: AJAX_PREFIX,
    timeout: AJAX_TIMEOUT,
    headers: { // 全局headers设置
        token: 'token string',
        'Content-Type': 'application/json',
    },
    onError: handleError,
    onSuccess: handleSuccess,
});

单次请求设置

通过options参数设置

// 直接使用方法
props.ajax.get('/some/url', {/*请求参数*/}, {headers: {'Content-Type': 'applicadtion/json'}})

// hooks 定义时设置
const {data, loading, run} = props.ajax.useGet('/some/url', {/*请求参数*/}, {successTip: '操作成功', headers: {'Content-Type': 'applicadtion/json'}});
// hooks 使用时设置
await run({/*请求参数*/}, {headers: {'Content-Type': 'applicadtion/json'}})