vue post请求 请求接口时body以及query同时传参

解决post请求，请求接口时需要body以及query同时传参的问题

request.js 文件中主要看post方法即可

post (url, params) {
    return service.post(url,
      params, {
      transformRequest: [
        (params) => {
          return JSON.stringify(params);
        },
      ],
      headers: { "Content-Type": "application/json" },
    });
  },

以下是request.js 完整代码

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
import qs from "query-string";

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  // timeout: 15000, // request timeout
  timeout: 30000, // request timeout
});

// request interceptor
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers["satoken"] = getToken();
    }
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  (response) => {
    // console.log(response)
    // 如果返回数据是文件，则直接返回
    if (response.headers.requesttype === "file") {
      return response;
    }
    const res = response.data;
    // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
    if (res.code === 401 || res.code === 50012 || res.code === 50014 || (res.code === 500 && res.message === '请先登录')) {
      store.dispatch("user/resetToken").then(() => {
        location.reload();
      });
    } else if (res.code === 500) {
      // Message({
      //   message: '数据获取异常',
      //   type: "warning",
      //   duration: 5 * 1000,
      // });
      Message({
        message: res.message || res.msg || "Error",
        type: "warning",
        duration: 1000,
      });
      return res;
    } else if (res.code === 501) {
      return res;
    } else if (res.code !== 200) {
      Message({
        message: res.message || res.msg || "Error",
        type: "error",
        duration: 1000,
        
      });
      return res
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    Message({
      message: error.message,
      type: "error",
      duration: 1000,
    });
    return Promise.reject(error);
  }
);
const http = {
  post (url, params) {
    return service.post(url,
      params, {
      transformRequest: [
        (params) => {
          return JSON.stringify(params);
        },
      ],
      headers: { "Content-Type": "application/json" },
    });
  },
  put (url, params) {
    return service.put(url, params, {
      transformRequest: [
        (params) => {
          return JSON.stringify(params);
        },
      ],
      headers: { "Content-Type": "application/json" },
    });
  },
  get (url, params) {
    return service.get(url, {
      params: params,
      // ,
      // paramsSerializer: (params) => {
      //   return qs.stringify(params);
      // },
    });
  },
  getRestApi (url, params) {
    let _params;
    if (Object.is(params, undefined || null)) {
      _params = "";
    } else {
      _params = "/";
      for (const key in params) {
        console.log(key);
        console.log(params[key]);
        if (
          params.hasOwnProperty(key) &&
          params[key] !== null &&
          params[key] !== ""
        ) {
          _params += `${params[key]}/`;
        }
      }
      _params = _params.substr(0, _params.length - 1);
    }
    console.log(_params);
    if (_params) {
      return service.get(`${url}${_params}`);
    } else {
      return service.get(url);
    }
  },
  delete (url, params) {
    let _params;
    if (Object.is(params, undefined || null)) {
      _params = "";
    } else {
      _params = "/";
      for (const key in params) {
        // eslint-disable-next-line no-prototype-builtins
        if (
          params.hasOwnProperty(key) &&
          params[key] !== null &&
          params[key] !== ""
        ) {
          _params += `${params[key]}/`;
        }
      }
      _params = _params.substr(0, _params.length - 1);
    }
    if (_params) {
      return service.delete(`${url}${_params}`).catch((err) => {
        message.error(err.msg);
        return Promise.reject(err);
      });
    } else {
      return service.delete(url).catch((err) => {
        message.error(err.msg);
        return Promise.reject(err);
      });
    }
  },
  upload (url, params) {
    return service.post(url, params, {
      headers: { "Content-Type": "multipart/form-data" },
    });
  },
  download (url, params) {
    return service.get(url, {
      params: params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      },
      responseType: "blob",
    });
  },
  downloadByPost (url, params) {
    return service.post(url, {
      params: params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      },
      responseType: 'blob',
    });
  },
  exportFile({ url, params, headers, responseType = "blob" }) {
    return service.post(url, params, {
      transformRequest: [
        (params) => {
          return JSON.stringify(params);
        },
      ],
      headers,
      responseType,
    });
  },
  login (url, params) {
    // return service.post(url, params, {
    //   transformRequest: [
    //     (params) => {
    //       return qs.stringify(params);
    //     },
    //   ],
    //   headers: { "Content-Type": "application/x-www-form-urlencoded" },
    // });
    return service.post(url, params);
  },
};
export default http;

test.js(接口文件)

import http from "@/utils/request"; // 注意引用路径（request.js我是放在utils文件夹下）

export default {
  async getSubmit (urlParams,params) {
    return await http.post('https://www.baidu.com/' + urlParams, params);
  },
}

index.vue(vue文件调用接口传参)
urlParams 为query中 地址栏上拼接的动态参数，tableData为body中传递的参数

import testApi from "@/api/test.js" // 导入接口文件，注意引用路径（test.js我是放在api文件夹下）

   submitSelection () {
      let fundcode = '000111'
      let urlParams = '?fundCode=' + fundcode
      let tableData= this.tableData.map((item) => {
        return item.windCode
      })
      testApi.getSubmit(urlParams, tableData).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message)
        }
      })
    },