axios二次封装之get请求

今天因为项目上跟后端联调接口时 ， 有一个 get 请求 ， 需要携带三个参数给后端

但是原本项目内简单封装 axios 的 get 请求就显得不那么简便了

（使用了在 url 后面进行拼接携带参数的方式 ），看着很繁琐 ， 用着也不爽

// list 列表页面请求接口
export const getListApi = async (id, model, type) => {
  let ret = await get(config.list + `?id=${id}&model=${model}&type=${type}`)
  return ret
}

所以打算再次对 get 请求处理一下 ， 使之使用起来能更加的高效 ：

首先先写个小 demo ， 供大家理解 ： 小 demo 需要用到的知识点 ： 1、Object.keys( ) 的用法 => 2、字符串的 . slice( ) 用法 => 小 demo 案例 代码 : <script> let config = { id: 110, model: 1, type: 2 } let str = ? Object.keys(config).forEach((item) => { console.log(item, ---, item); console.log(config[item], ---, config[item]); str += `${item}=${config[item]}&` }) str = str.slice(0, -1) console.log(str, 处理好之后的str); </script>

封装好之后的 get 请求 ：

/**
 * 封装后的 get 请求方法
 * @param {string} url 请求路径
 * @param {object} params 用户自定义设置(参数)
 * @returns
 */
export const get = (url, params = {}) => {
  let str = "?";
  Object.keys(params).forEach((item) => {
    str += `${item}=${params[item]}&`;
  });
  str = str.slice(0, -1);
  return httpres.get(url + str);
};

// list 列表页面请求接口
export const getListApi = async (params) => {
  let ret = await get(config.list, params)
  return ret
}

详情请查看 =>

/** * 封装后的 get 请求方法 * @param {string} url 请求路径 * @param {object} params 用户自定义设置(参数) * @returns */ export const get = (url, params = {}) => { let str = "?"; Object.keys(params).forEach((item) => { str += `${item}=${ encodeURI(params[item])}&`; }); str = str.slice(0, -1); return httpres.get(url + str); }; encodeURI( ) => 可解决 IE 浏览器的中文乱码问题