首页 > 其他分享 >vue中的get方法\post方法如何实现传递数组参数

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

时间:2023-03-17 14:23:48浏览次数:34  
标签:Toast qs vue return get HttpServiceConfig post config method

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

解决方法:将数据用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' })
        })
    }

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

 

标签:Toast,qs,vue,return,get,HttpServiceConfig,post,config,method
From: https://www.cnblogs.com/xiaoxiaomini/p/17226586.html

相关文章

  • Electron + Vue3 + TS + sqlite3项目搭建
    Electron+Vue3+TS+sqlite3项目搭建基础环境nodev14.20.1npmv6.14.17安装vue-cli$npminstall@vue/[email protected]//等待安装完成$vue-V//@vue/cli5......
  • (Vue3.0二维码),复制链接
    一:复制链接1、html部分:<el-dialogv-model="dialogTableVisible"title="分享方式"><el-row><el-buttonclass="copy"data-clipboard-text="getUlr"click="copy......
  • Vue——el-option下拉框绑定
    Vue——el-option下拉框绑定https://blog.csdn.net/wx19900503/article/details/1092684801、正常使用v-for进行遍历下拉框内容,如果需要增加一个自定义的值,则加一个el......
  • vue3 + vue-clipboard3 复制文本到剪切板
    1.安装yarnaddvue-clipboard32.引入importuseClipboardfrom'vue-clipboard3';3.html部分<n-buttontertiarytype="primary"ref="copyBtn"@click="copyP......
  • iPhone 11的widget无法显示较大的3x图
    背景widget列表中的预览使用一整张图,并且只提供了3x图片。有用户反馈iPhone11上不显示预览图问题ue提供的资源文件是1080*507大小,iPhone11上widget无法显示这么大尺寸......
  • VUE父子组件生命周期执行顺序
    组件关系,HomeView与AboutView为同级,HelloWorld为HomeView的子组件刚进HomeView页面时更新HomeView页面更新HelloWorld页面切换到AboutView......
  • 关于Vue3+ts引入文件使用alias别名@时报错问题,process is not defined
    如题,解决办法:一、首先确保有两个文件:   tsconfig.json  vite.config.ts(注:如果是vue.config.js,则手动改为vite.config.js)二、在ts.config.json中修改{"comp......
  • 万字血书Vue—走近Vue
    Vue是什么?Vue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面:用vue往html页面中填充数据渐进式:Vue可以自底向上逐层的应用,从轻量小巧核心库的简单应用,......
  • sonarqube及postgresql部署文档
      同样通过compose来部署sonarqube及postgresql,由于高版本的sonarqube不支持mysql,所以用通用postgresql #这里我们安装的SonarQube依赖ELK,我们这里需要修改系统......
  • vue3 js 学习笔记
    Vue3-js学习笔记目录Vue3-js学习笔记目录前言reactive数据绑定事件绑定生命函数周期计算属性-computedpropsemit-自定义事件ref-获取元素及子组件watchvu......