遵义网约车资格证,福州搜索优化行业,wordpress 百科,网站建设与维护 pdf系列文章目录
本系列记录一下通过Abp搭建后端#xff0c;VueElement UI Plus搭建前端#xff0c;实现一个小型项目的过程。
Day 1 Vue 页面框架Day 2 Abp框架下#xff0c;MySQL数据迁移时#xff0c;添加表和字段注释Day 3 登录页以及路由 (一#xff09;Day 4 登录页以…系列文章目录
本系列记录一下通过Abp搭建后端VueElement UI Plus搭建前端实现一个小型项目的过程。
Day 1 Vue 页面框架Day 2 Abp框架下MySQL数据迁移时添加表和字段注释Day 3 登录页以及路由 (一Day 4 登录页以及路由 (二Vue状态管理 文章目录 目录 系列文章目录 文章目录 前言 一、axios 二、封装还是不封装这是个问题 1. 封装的目的 2. 怎么封装 3. 到底要不要封装 前言
作为前后端分离的系统请求后端API是一个必不可少的工作本文就介绍了Vue中调用后端API的基础内容。 一、axios
Vue官方推荐使用axios来进行网络请求于是先到axios的官网上看了一遍文档其介绍是这样的 Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 大致看了一下官方文档发现功能已经很齐全了唯一需要处理的就是针对特定系统的配置性处理。程序员之魂开始燃烧封印术已经按捺不住了。
二、封装还是不封装这是个问题
1. 封装的目的
老套路先看看别人怎么做的程序员的事情怎么能叫抄呢 。搜索一下有做简单封装的比如 这个 有做复杂封装的比如这个和这个同时评论区也有人疑惑为何要封装是不是和axios背道而驰。
首先封装的目的总结下来大致有这么几个 统一请求头。大部分项目对应的后端需要统一请求头比如app,version,token之类的。既然是统一那天然的就应该是放在封装层里面。错误处理。根据API返回结果或者更底层一点根据HttpStatus来进行通用的错误处理。啊哈通用懂了把。重试及取消操作。在网络世界不通是常见的“偶发”问题。或者是连接失败或者是服务器错误或者是太阳黑子影响总之反应到页面上就是无法访问。然后刷新一下就神奇的好了。另外操作响应时间不固定性急的人往往会连击而响应不一定是按请求顺序返回或者直接不返回。不做处理的话容易造成数据混乱页面卡死之类的。这个时候取消一下前面的请求让页面只对最后一个请求结果进行处理会简化处理逻辑。同样这个“应该”也是一个统一处理。开发过程中的配置。设置接口请求前缀根据开发、测试、生产环境的不同前缀需要加以区分。我的理解这是一个伪需求 axios本身的baseUrl就是干这个的。觉得axios是第三方库对项目而言需要隔离一下以备将来换成别的库。这个就见仁见智了解耦到这个程度还是需要一些勇气的。另外你确定不是在重复设计axios就是单纯不封装不舒服不服来战
2. 怎么封装
具体封装的手段大致有两个
依赖拦截器无论是请求拦截器还是响应拦截器都是axios提供的扩展点。封装常用代码为方法。即把get、post等常用请求方法再封装一次。这个我以为仅限于项目中对这些方法有特定需要的。因为axios本身就有别名方法够满足大部分需要了。
3. 到底要不要封装
看了一圈下来结合官方文档我感觉二次封装有必要但过度封装就没有必要了搭建一个架子把基本目标实现了就可以了其它的后续再根据需求调整渐进式开发嘛。
其实从后端开发的角度来看封装axios就和封装WebRequestHttpClient之类的一样根据实际需要来就行。要克制过度设计有害健康。
另外大部分文章都提到了将实际api的调用封装起来放到单独的文件中去比如api\xxxManage.ts。这个我赞成和后端服务层或数据访问层的作用一样。这么看axios就和DBDriver一样属于偏底层的库当然它的底层是XmlHttpRquest 和 node.js http 模块。
基础研究到此为止开始重复发明轮子。
三、实际操作
1. 代码结构
创建 src/api 文件夹下面创建 index.ts 文件axios的封装代码就写在这里了。然后针对不同的领域建立不同的api封装文件。比如 login.ts 就封装登录相关api提供给LoginView使用。
2. 调用端代码
参照TDD的方式先写最顶层调用端代码
src/view/LoginView.vue
async function fakeLogin(event: Event) {//currentUser.setToken(faked login token)const loginRequest: Login.LoginRequest { username: test, password: pw }const loginResponse: Login.LoginResponse await login(loginRequest)currentUser.setToken(loginResponse.access_token)currentUser.setUserInfo({ name: loginResponse.name })
}
伪代码一路到底这里利用了语法糖 await还是很甜的。 然后定义login api 的封装接口这里没有想好login方法是否要放入Login命名空间暂时先这样吧。
src/api/login.ts
// 登录模块
export namespace Login {export interface LoginRequest {username: stringpassword: string}export interface LoginResponse {access_token: stringname:string}
}export const login async (params: Login.LoginRequest) {console.log(call async login.)const response:LoginResponse { access_token:token, name:test user}return response
}测试一下看看效果点击Fake Login按钮后 3. API 接入实现
先做基础配置工作src/api/index.ts
import axios, { AxiosError } from axios
import type { InternalAxiosRequestConfig } from axiosimport { BASE_URL } from /config
import { useCurrentUserStore } from /stores/currentUserconst instance axios.create({baseURL: BASE_URL,timeout: 3000,
})instance.interceptors.request.use((config: InternalAxiosRequestConfig) {// 当前用户已登录的情况下添加Authorization请求头const userStore useCurrentUserStore()if (userStore.token ! ) {if (config.headers typeof config.headers.set function) {config.headers.set(Authorization, userStore.token)}}return config},(error: AxiosError) {return Promise.reject(error)}
)export default instance到这个阶段暂时只是添加token到请求头里其实这个都算早的只是为了使用下拦截器而且确实也是后面需要的功能所以先写下来。后面错误处理还没有弄这个需要结合页面表现再看。
另外就是BASE_URL直接使用了config的配置关于环境的切换发布时直接更改这个也不是很麻烦暂时就先这样了。
重写 src/api/login.ts
import http from /api
import type { Login, ResultDTO } from ./interfacesexport const login async (params: Login.LoginRequest
): PromiseResultDTOLogin.LoginResponse {const { data } await http.post(/api/account/login, params)return data
}把请求和响应移到 interfaces文件中统一管理了。这个只是一个习惯看将来大概会从什么角度来阅读代码。所有请求放到一个文件方便上手就能看到整体。放到接近使用的地方比如login.ts中则可以在使用的地方就知道具体含义不过IDE的Go to definition功能也是很好用的。
interfaces里面还包括了后端响应基类没有采用REST的推荐自定义了Code具体代码如下
src/api/interface.ts
/** API响应 */
export interface ResultBase {/** 响应代码 */code: string/** 消息 */message: string/** 是否成功 */success: boolean
}
/** API响应 */
export interface ResultDTOT extends ResultBase {/** 数据 */data: T
}// 登录模块
export namespace Login {/** 登录请求 */export interface LoginRequest {/** 用户名 */username: string/** 密码 */password: string}/** 登录响应账号信息 */export interface LoginResponse {/** Token */token: string/** 用户昵称 */nickname: string}
}四、总结
前面搞了一大堆实际代码没有多少另外错误处理也还没有弄但是理清了思路。这里有一个点就是src/api/login.ts 这个文件是否有必要因为就是一行代码封装成函数似乎有点重复且繁复。暂时留在这里也是为了错误处理还没有思考具体错误处理是留在这里还是放到view层或者直接在 axios 封装代码里通过响应拦截器处理。各有各的优缺点。等先把页面样式写好再看看写到哪里比较合适。
