@ra-lib/ajax v0.1.49

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

具体方法options

其他参数参见axios

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；

常用示例：

// 获取角色列表、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'}})