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 案例代码 :
  <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
}

详情请查看 => 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 浏览器的中文乱码问题

axios二次封装之get请求相关推荐

原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
axios二次封装以及API接口统一管理
前端向服务器发送请求,使用的方法有很多: XMLHttpRequest.fetch.JQ.axios 1.axios二次封装二次封装axios是为了请求拦截器.响应拦截器. 请求拦截器:可以在发送请 ...
vue：axios二次封装，接口统一存放
https://www.jianshu.com/p/9077baa9d543 一.基于框架:vue 二.基于http库:axios 三.基本用法: 1.通过node安装: npm instal ...
axios的简单封装和http请求实践
对axios做一个简单的封装和实现的思路,主要实现: 统一捕获接口报错(拦截器) 基础验证 (auth) import axios from 'axios' // 最基本的全局配置 const ins ...
ts版axios二次封装
src中创建一个api文件夹,里面有两个文件 request.ts import axios from "axios";export const Service = axios.c ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios介绍以及对axios进行二次封装
目录一.axios基础 1.什么是axios? 2.axios的安装 3.axios常用配置项 4.axios和ajax的区别二.使用axios发送请求 1. 发送get无参请求 2. 发送get ...
Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...

axios二次封装之get请求

axios二次封装之get请求相关推荐

最新文章

热门文章