前言

想必大家之前在封装axios请求Api函数的时候，会发现如果是 字符传参，有两种方式

第一种，传入对象，使用 params 参数

export const loginApi = (data) => {
  return http({
    method: "post",
    url: "http://dd.lohand.com:11006/platFormSubUser/login",
    params: {
      platFormSubUserName: data.userName,
      platFormSubUserPass: data.userPass,
    },
  });
};

第二种，链式调用，直接在 url 后拼接字符串参数

export const loginApi = (data) => {
  return http.post(
    `http://dd.lohand.com:11006/platFormSubUser/login?platFormSubUserName=${data.userName}&platFormSubUserPass=${data.userPass}`
  );
};

如果是第二种方式的话，会显得比较繁琐，这里推荐大家使用一个插件，名称叫做 qs

下载依赖包

pnpm install qs

如果使用的是 npm 或者 yarn 包管理器，可以使用 npm install qs 或 yarn add qs

引入

在需要使用的组件文件或js文件中引入

import qs from "qs";

使用

在需要的地方进行调用，随便打印出来看下区别

export const loginApi = (data) => {
  console.log(data);
  console.log(qs.stringify(data));
  return http.post(
    "http://dd.lohand.com:11006/platFormSubUser/login",
    qs.stringify(data)
  );
};

区别

此次分享到这里就结束啦，后续给大家推荐更多好用的插件！ 别忘记帮忙点个赞哟！ ❥(^_-)