vue中的get方法\post方法如何实现传递数组参数

问题：后端接口参数里面带有数组，但是前端按常规方式提交后后台收不到数组数据

解决方法：将数据用qs处理过后再提交

请求封装：

export class AxiosHttpService {
    $http: AxiosInstance = axios.create({
        baseURL: ApiServicesUrl
    });

    getAxiosByApiUrl() {
        return axios.create({
            baseURL: ApiUrl
        });
    }

    httpService<T>(config: HttpServiceConfig) {
        const { $http } = this;
        if (config.method === undefined) {
            config.method = "POST";
        }
        return new Promise<T>(function (resolve) {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            });
            $http(config).then((res: any) => {
                Toast.clear();
                resolve(res.data.result);
            }).catch(() => {
                Toast.clear();
                Toast.fail(`网络异常，请稍后再试.`);
            })
        })
    }


    post<T>(config: HttpServiceConfig) {
        config.method = "POST";
        return this.httpService<T>(config);
    }

    get<T>(config: HttpServiceConfig) {
        config.method = "GET";
        return this.httpService<T>(config);
    }
    delete<T>(config: HttpServiceConfig) {
        config.method = "DELETE";
        return this.httpService<T>(config);
    }

    httpServiceNoCatch<T>(config: HttpServiceConfig) {
        const { $http } = this;
        if (config.method === undefined) {
            config.method = "POST";
        }
        return new Promise<T>(function (resolve, reject) {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            });
            $http(config).then((res: any) => {
                Toast.clear();
                resolve(res.data.result);
            })
                .catch((err: any) => {
                    Toast.clear();
                    reject(err.response.data);
                });
        })
    }


    axios(config: HttpServiceConfig) {
        return axios({ ...config });
    }
}


/// 每次重新返回一个新的AxiosHttpService
export function GetNewAxiosHttpService() {
    return new AxiosHttpService();
}

export default new AxiosHttpService();

因为只有极少数接口可能涉及到数组问题，所以我暂时不准备动axios的封装，而是准备从接口提交那块入手。

一般情况下的api请求可按以下方式请求：

getRegGardenByChildId(input: IGetRegGardenByChildIdInputDto) {
        return axiosHttpService.get<Array<IGetRegGardenByChildIdDto>>({
            url: 'ZSRefChildGarden/GetRegGardenByChildId',
            params: input
        })
    }

此时的请求参数如下：

但是这种方式请求的话，后台接收不到数组，所以我们将用qs先处理一下以后再提交。

1、引入qs

import qs from 'qs';

2、修改请求方式，修改后大致如下

getFullChildRegInfo(input: ISaveRefChildGardenPageDto) {
        return axiosHttpService.get<FullChildRegInfoDto>({
            url: 'ZSRefChildGarden/GetFullChildRegInfo?' + qs.stringify(input, { arrayFormat: 'repeat' })
        })
    }

修改后的请求参数中的数组会如下显示