接口挂了?没事,我在vue.js中实现自动生成数据的网络请求,拷贝即用,速来围观!
封装了一个轻量化、自由拓展、低耦合的网络模块,无需后端服务,直接响应字符串、数字、布尔值、数组、图片等随机数据,支持取消请求、配置覆盖、请求状态提示、文件上传、下载等功能,极大地提升前端的开发体验。
🍭 介绍
本篇文章中,我们约定前端和后端沟通的桥梁称为网络模块。日常学习工作中,经常因为网络模块混乱难拓展而头疼,时常因为后端接口无法提供而停滞不前。为解决开发时的痛点问题,经过学习探究,封装了一个轻量化、自由拓展、低耦合的网络模块。无需经过后端服务返回字符串、数字、布尔值、数组、图片等随机数据,支持取消请求、配置覆盖、请求状态提示、文件上传、下载等功能,极大地提升前端的开发体验。
💊 解决痛点问题
- 后端资源不足,无法提供接口,需要写又长又臭的假数据测试;
- 开发用于演示的静态网页,暂时不需要后端接口;
- 后端接口不稳定时常崩溃无数据,影响前端开发体验;
- 产品上线后,需要维护定制,普通的网络模块隔离性、拓展性、自由度不高。害怕修改后影响原先功能,导致复制一份同样文件,增加代码冗余,写法各异,难以形成团队规范;
- 某些接口展示请求状态提示信息,例如:错误提示,成功提示;
- 开发环境下配置不好代理服务器;
- 特定场景下需要取消向后端请求;
💻 测试环境
- Vue.js 2.6.11;
- Mockjs2;
- Axios 0.21.1;
📙 规约原则
- 配置生效原则遵循,后配置权重最高;
- 数据模拟,根据接口约定的数据格式规则,返回随机生成数据,请求不真实发出,浏览器无法查询到接口调用,无需经过后端服务;
🧩 目录结构
network
├─api.js // 请求接口
├─config.js // 配置
├─http.js // Axios实例
├─intercept.js // 拦截器
├─request.js // 请求方法实例
└utils.js // 辅助方法
🚀 工作流程
简要的功能流程描述图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKbe89Jw-1683452074497)(null)]
📌 请求方法说明
基于axios实例,封装了get、post、upload等请求方法,根据url自动注册Mock拦截,支持在请求方法中设置默认的配置。灵感来源于切面编程的思想,提高接口的灵活度,具体逻辑处理移步查阅request.js
文件。
// request.js
/**
* get请求方法
* @param {String} url 接口地址 必填
* @param {Object} mockData 随机数据(硬编码对象|Mock数据格式|函数)选填
* @param {Boolean} FWS 数据模拟功能开关 选填
*/
get(url, mockData, FWS)
/**
* post请求方法
* @param {String} url 接口地址 必填
* @param {Object} mockData 随机数据(硬编码对象|Mock数据格式|函数)选填
* @param {Boolean} FWS 数据模拟功能开关 选填
*/
post(url, mockData, FWS)
/**
* 上传请求方法
* @param {String} url 接口地址 必填
*/
upload(url)
/**
* 通过URL链接下载文件
* @param {String} url 文件地址
* @param {String} filename 文件名称
*/
downloadFileByUrl(url, filename)
/**
* 通过二进制流下载文件
* @param {Blob} content 二进制流
* @param {String} filename 文件名称(不带后缀)
* @param {String} MIME MINE类型
* @param {Function} callback 回调函数
*/
downloadFileByBlob(url, fileName, MIME, callback)
💡 请求接口约定示例
无数据
无数据模拟功能的正常接口,只有一个参数。
// api.js
const login = get('/user/login')
const register = post('/user/register')
有数据无逻辑
有数据模拟功能,但是不能根据请求参数进行逻辑处理后返回。当模拟功能开启时,调用请求接口并不会真实的发出,而是通过第二个参数控制返回随机数据。如果第二个参数为普通的对象,则原样返回,若第二个参数为mock数据格式,则由数据格式生成数据后返回。数据模拟功能在开发环境下默认开启,生产环境下默认关闭,支持通过传入第三个布尔值参数,精准控制接口数据模拟功能的开关状态。
// api.js
const mockTest = get("/mock/test", {
// 生成含5-10个元素的数组
"persons|5-10": [
{
"name|1-6": "花", // 字符串
"status|1": true, // 布尔值
"type|1": ["在线", "离线"], // 数组中其一
"headIcon|": Mock.Random.image("50x50", '#ec7168', "花森"), // 特定尺寸图片
'key|+1': 1, // 递增整型
"longitude|119.8": 1.36, // 经度
"latitude|26.8": 1.03, // 纬度
}
]
}, true)
有数据有逻辑
既有数据模拟功能,又能根据请求参数进行逻辑处理后返回。当模拟功能开启时,调用请求接口并不会真实的发出,而是通过第二个参数传入函数经过逻辑控制后返回数据,其中函数的形参包含有请求携带的参数。该功能同样在开发环境下默认开启,生产环境下默认关闭,支持通过传入第三个布尔值参数,精准控制接口数据模拟功能的开关状态。
// api.js
const mockTest = get("/mock/test", function (param) {
console.log("请求参数", param)
// 逻辑判断代码块
return {
name: 'huasen',
age: 18
}
}, true)
🤖 请求接口调用说明
灵感来源于切面编程的思想,我们在多个阶段可以设置请求配置,它们逐层覆盖,提高接口的灵活度。具体优先级规则如下所示:
- 生成Axios示例时候的配置优先级最低;
- 封装get、post请求方法时候的配置优先级较高;
- 请求接口调用时候配置的优先级最高;
// 约定的请求接口
const login = get('user/login')
/**
* 请求接口调用说明
* @param {Object} param 请求携带的参数
* @param {Object} config 请求配置
*/
login(param, config)
// 调用示例
login({}, {baseURL: '/demo-dev'})
🐛 快速入门
入门整合教程选取Vue-cli搭建的工程,并且默认已经安装Axios
、Mockjs2
。若项目内未有相关的依赖,可以执行npm install axios mockjs2 --save
进行安装。
模块引入
引入工作十分简单,复制network
到前端工程的src
目录下,可以任何位置引用api.js
文件,调用请求接口发起请求。
src
├─... // 其他文件
└network // 网络模块目录
约定请求接口
通常在api.js
文件中约定请求接口,当然不同团队可以建立专属的请求接口文件,最后汇总到api.js
统一导出。
// 引入相关资源
import Mock from 'mockjs'
import { get, post } from './request.js'
// 约定的请求接口
const login = get('/user/login')
const register = post('/user/register')
const mockTest = get("/mock/test", {
"persons|5-10": [
{
"name|1-3": "花",
"status|1": true,
"type|1": ["在线", "离线"],
"headIcon|": Mock.Random.image("50x50", '#ec7168', "花森"),
'key|+1': 1,
"longitude|119.8": 1.36,
"latitude|26.8": 1.03,
}
]
})
// 统一导出
export default {
login,
register,
mockTest,
}
绑定 Vue 原型
进入main.js入口文件,把请求api绑定到Vue的原型中,免去后期频繁引入,.vue
单文件组件中直接可以通过this
进行访问,快速调用请求接口,进行发起请求。
import Vue from 'vue'
import api from '@/network/api.js'
Vue.prototype.API = api;
发起请求
单文件组件
由于.vue
结尾的单文件组件直接继承于Vue原型,所以直接通过this.API
可以访问到约定的请求接口,快速调用发起请求。
// Home.vue文件中
...
mounted() {
// mock功能请求
this.API.mockTest().then(res => {
console.log('mock随机数据', res.data);
});
// 正常请求
this.API.login();
},
js文件
普通javascript的文件需要引入Vue,通过Vue.prototype.API
可以访问到约定的请求接口。
import Vue from 'vue'
Vue.prototype.API.login()
取消请求
某些场景下,需要通过取消已经发送但未响应的请求来减少性能的消耗。网络模块默认封装的get、post请求方法预留取消令牌的配置,可以调用请求接口时在请求配置中传入_cancelable
字段控制请求是否可被取消。经过调用时配置后,我们就可以从config.js
文件中导出source
对象,调用cancel
方法实现取消已经发出但为响应的请求。
import Config from '@/network/config.js'
// 调用请求接口
this.API.login(
{
name: '花森',
age: 18,
},
{
_cancelable: true,
},
);
// 取消请求
Config.source.cancel('手动取消请求');
🥳 联系我们
由于涉及知识面较广,文字讲解篇幅过大,可以关注我的 Bilibili 账号,后续更新视频教程,感兴趣的小伙伴可以添加站长微信 ,进入前端技术交流群!
🐧企鹅QQ:184820911
😸微信 :huasencc(站长邀请进入前端交流群)
📮邮箱 :184820911@qq.com
📺哔哩哔哩:花森酱 JioJio
🦑代码示例地址:https://github.com/huasenjio/huasen-portal/tree/main/src/network
更多推荐
所有评论(0)