如何在项目中封装api
一般在项目中,会有很多的api请求,无论在vue,angular,还是react中都应该把接口封装起来,方便后期的维护。
1.新建一个api文件
我们可以在项目的分目录下创建一个api文件夹,在这里面管理我们项目中会 用到的api接口
2.了解为啥要封装请求?
先来看下官方文档中的请求发送,如果每发一次请求,都得写这么一长串的代码,还挺折磨人的。。。
从中我们可以看到,请求中的methos是字符串,url也是字符串,只有data是变化的,既然是字符串那应该不怎么会变动,能不能想办法封装一下?
3.一步一步封装
请求发送的方式methos,常用的有四种:'get', 'post','put','delete',我们想办法先省去每次axios中配置method,既然要省略method,那就得封装axios,动手
(1)在api文件下新建manage.js文件
(2)引入axios,封装axios
接下来我们在另一个文件引用这个,来看下效果:
有的人可能会觉得,这好像没啥,感觉跟写不写method,好像区别不大,但这是封装的一个思路
另外我们还能发现,这个url也是个字符串,如果后台改了登录接口地址,我得在这里修改url地址,最起码比写在登录页面下去找发送地址,然后修改要快的多
接下来动手封装一下url路径,毕竟一个项目中的接口地址,没有几百也有几十,我们不能把他们分散在项目的各个地方,最好能统一放在一起,也方便我们的管理
(1)在api文件下,新建一个index.js目录
(2)把我们用到的api地址都写在这里,然后导出
如果有更多的内容,就都添加在api的对象中就可以了
现在我们method和url地址都封装了,来看看我们怎么使用封装后的结果
(1)新建一个api.js文件,导入manage.js中的方法 和 index.js中的api地址
(2)写好请求方法后导出
但是这每写一个请求就是三行,然后导出,感觉还挺占位置的
写成这样感觉也不错,两行,不然写成下面这样
4.最后的样子
一个api文件下三个子文件
api.js是实际用到的请求地址,index.js是url地址存放的地方,manage.js是封装axios的地方
每个页面的样子
index.js:
const api = {
login: '/login'
} export default api
manage.js
import axios from 'axios' export function postAction(url, parameter) {
return axios({
url: url,
method: 'post',
data: parameter
})
} export function getAction(url, parameter) {
return axios({
url: url,
method: 'get',
params: parameter
})
} export function deleteAction(url, parameter) {
return axios({
url: url,
method: 'delete',
params: parameter
})
} export function putAction(url, parameter) {
return axios({
url: url,
method: 'put',
data: parameter
})
}
api.js
import {postAction, deleteAction, getAction, putAction} from "./manage";
import api from 'api' export const login = (params) => postAction(api.login, params); export {
login
}
如有不对的地方,欢迎指正修改!
如何在项目中封装api的更多相关文章
- 分享我在 vue 项目中关于 api 请求的一些实现及项目框架
本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...
- Vue实例中封装api接口的思路 在页面中用async,await调用方法请求
一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时 接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...
- itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码
导读: 主要从4个方面来阐述,1:背景:2:思路:3:代码实现:4:使用 一:封装背景 像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ...
- 在vue项目中封装echarts的正确姿势
为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...
- vue项目,封装api并使用
封装api index.js let uploadBase = '' if(process.env.NODE_ENV === 'production'){ uploadBase = 'https:// ...
- .Net Core中的Api版本控制
原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...
- 【转】.Net Core中的Api版本控制
原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...
- Fiddler无法抓取web项目中的http请求解决方案
问题:webform项目中对接API使用Fiddler无法获取该API的请求,该webform比较老的一个项目, 同一个API写在控制台可以抓取到请求,用web项目放在本地IIS却不行,使用IIS E ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
随机推荐
- qemu-guest-agent详解
qemu guest agent简称qga, 是运行在虚拟机内部的一个守护程序(qemu-guest-agent.service),他可以管理应用程序,执行宿主机发出的命令. QEMU为宿主机和虚拟机 ...
- 09.DRF-ModelSerializer
四.模型类序列化器ModelSerializer 如果我们想要使用序列化器对应的是Django的模型类,DRF为我们提供了ModelSerializer模型类序列化器来帮助我们快速创建一个Serial ...
- async/await到底该怎么用?如何理解多线程与异步之间的关系?
前言 如标题所诉,本文主要是解决是什么,怎么用的问题,然后会说明为什么这么用.因为我发现很多萌新都会对之类的问题产生疑惑,包括我最初的我,网络上的博客大多知识零散,刚开始看相关博文的时候,就这样.然后 ...
- maven依赖冲突以及解决方法
什么是依赖冲突 依赖冲突是指项目依赖的某一个jar包,有多个不同的版本,因而造成类包版本冲突 依赖冲突的原因 依赖冲突很经常是类包之间的间接依赖引起的.每个显式声明的类包都会依赖于一些其它的隐式类包, ...
- springboot集成jpa操作mybatis数据库
数据库如下 CREATE TABLE `jpa`.`Untitled` ( `cust_id` bigint() NOT NULL AUTO_INCREMENT, `cust_address` var ...
- C++核心内容和机制
备注:不局限与C++版本 一. 基础知识 数据类型和POD/Trivial 数据类型: 类型转换: NULL和nullptr: 操作符重载: 全局静态变量和成员静态变量的申明和初始化: 左值和右值 ...
- 计算机网络之DNS协议
DNS( Domain Name System)是“域名系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工 ...
- python用类的方式创建线程---自创建类
用类的方式创建线程---自创建类 import threadingimport time class MyThread(threading.Thread):#自建MyThread类继承threadin ...
- CentOS 关闭暂不需要的系统服务
需要保留的服务:crond.iptables.irqbalance.microcode_ctl.network.random.sshd.syslog.local 一 .使用命令:ntsysv 打开选项 ...
- Java1.7的HashMap源码分析-面试必备技能
HashMap是现在用的最多的map,HashMap的源码可以说是面试必备技能,今天我们试着分析一下jdk1.7下的源码. 先说结论:数组加链表 一.先看整体的数据结构 首先我们注意到数据是存放在一个 ...