一般在项目中,会有很多的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的更多相关文章

  1. 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...

  2. Vue实例中封装api接口的思路 在页面中用async,await调用方法请求

    一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时  接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...

  3. itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码

    导读: 主要从4个方面来阐述,1:背景:2:思路:3:代码实现:4:使用 一:封装背景       像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ...

  4. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  5. vue项目,封装api并使用

    封装api index.js let uploadBase = '' if(process.env.NODE_ENV === 'production'){ uploadBase = 'https:// ...

  6. .Net Core中的Api版本控制

    原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...

  7. 【转】.Net Core中的Api版本控制

    原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...

  8. Fiddler无法抓取web项目中的http请求解决方案

    问题:webform项目中对接API使用Fiddler无法获取该API的请求,该webform比较老的一个项目, 同一个API写在控制台可以抓取到请求,用web项目放在本地IIS却不行,使用IIS E ...

  9. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

随机推荐

  1. qemu-guest-agent详解

    qemu guest agent简称qga, 是运行在虚拟机内部的一个守护程序(qemu-guest-agent.service),他可以管理应用程序,执行宿主机发出的命令. QEMU为宿主机和虚拟机 ...

  2. 09.DRF-ModelSerializer

    四.模型类序列化器ModelSerializer 如果我们想要使用序列化器对应的是Django的模型类,DRF为我们提供了ModelSerializer模型类序列化器来帮助我们快速创建一个Serial ...

  3. async/await到底该怎么用?如何理解多线程与异步之间的关系?

    前言 如标题所诉,本文主要是解决是什么,怎么用的问题,然后会说明为什么这么用.因为我发现很多萌新都会对之类的问题产生疑惑,包括我最初的我,网络上的博客大多知识零散,刚开始看相关博文的时候,就这样.然后 ...

  4. maven依赖冲突以及解决方法

    什么是依赖冲突 依赖冲突是指项目依赖的某一个jar包,有多个不同的版本,因而造成类包版本冲突 依赖冲突的原因 依赖冲突很经常是类包之间的间接依赖引起的.每个显式声明的类包都会依赖于一些其它的隐式类包, ...

  5. springboot集成jpa操作mybatis数据库

    数据库如下 CREATE TABLE `jpa`.`Untitled` ( `cust_id` bigint() NOT NULL AUTO_INCREMENT, `cust_address` var ...

  6. C++核心内容和机制

    备注:不局限与C++版本   一. 基础知识 数据类型和POD/Trivial 数据类型: 类型转换: NULL和nullptr: 操作符重载: 全局静态变量和成员静态变量的申明和初始化: 左值和右值 ...

  7. 计算机网络之DNS协议

    DNS( Domain Name System)是“域名系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工 ...

  8. python用类的方式创建线程---自创建类

    用类的方式创建线程---自创建类 import threadingimport time class MyThread(threading.Thread):#自建MyThread类继承threadin ...

  9. CentOS 关闭暂不需要的系统服务

    需要保留的服务:crond.iptables.irqbalance.microcode_ctl.network.random.sshd.syslog.local 一 .使用命令:ntsysv 打开选项 ...

  10. Java1.7的HashMap源码分析-面试必备技能

    HashMap是现在用的最多的map,HashMap的源码可以说是面试必备技能,今天我们试着分析一下jdk1.7下的源码. 先说结论:数组加链表 一.先看整体的数据结构 首先我们注意到数据是存放在一个 ...