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( ) 的用法  =>  JavaScript _ Object.keys( )_雨季mo浅忆的博客-CSDN博客

2、字符串的 . slice( ) 用法  =>  JavaScript _ 字符串_雨季mo浅忆的博客-CSDN博客

---

小 demo 案例 代码 :

---

封装好之后的 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
}

---

详情请查看  =>  axios 数据请求二次封装及实战案例_雨季mo浅忆的博客-CSDN博客

---

/**
 * 封装后的 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 浏览器的中文乱码问题