1.首先创建一个vue2+js开发的框架;
以下是对axios进行的封装,使用时需要npm i axios
2.在src文件夹下创建一个network文件夹,并且network文件夹下创建一个index.js的文件
3.在index.js文件里面进行网络请求封装
// 导入axios网络请求
import axios from "axios"
//定义函数完成公共网路请求的封装
function startNetwork(params){
// params是一个对象,用来存储开发人员传递的网络请求参数
return axios({
timeout:2000,
...params
});
}
startNetwork({});
//使用webpack完成模块化的自动化导入
//require.context是webpack依赖管理的方法,作用是从指定的里面将所有的模块自动化导出,导出之后会创建一个上下文对象,有该上下文对象管理导出的模块内容
// require.context接收三个参数,参数1代表搜索的目录路径,参数2布尔类型,代表当前目录中存在子级目录是否进行搜索,参数3正则表达式,用来指定哪些类型的文件被当作模块进行导入
const modules = require.context("./apis", true, /\.(js|ts)$/);
//获取modules对应的模块名称
const newModules = modules.keys().reduce((target, keyName)=>{
//获取文件的文件名, replace(re, "$1")--使用左侧正则指令中第一个括号中的内容去替换正则匹配的内容
const fileName = keyName.replace(/^\.\/(\w+)\.(js|ts)$/, "$1");
//获取模块内容
const module = modules(keyName).default;
//在所有的函数名称前面添加文件的名字
for(let key in module){
target[fileName+"/"+key] = module[key];
}
return target;
}, {});
//遍历newModules中的键值对,为key添加getter方法
/**
* Object.defineProperty作用是向指定的对象中添加属性,同时为对应的key生成setter或者是getter方法。
* 优缺点
* 1.优点:该操作是ES5内置的方法,因此不存在浏览器兼容性问题
* 2.该方法一次性只能为对象添加一个属性,因此如果需要添加多个需要通过循环结构,代码实现比较复杂,同时该方法只能为对象静态添加属性,即如果对象后期需要增加属性,则新增加的属性无法设置setter或者getter,只能重新调用
*
* Proxy作用和Object.defineProperty作用相似,但是区别:
* 1.Proxy是ES6新增语法,因此存在浏览器兼容问题
* 2.优点:Proxy可以直接绑定对象,为对象中每一个属性添加setter或者getter,并且Proxy对象自带数据监听,动态添加的数据也可以自动添加setter或者getter,因此该操作经常被用来完成数据劫持。
* */
// let obj = {};
// for(let key in newModules){
// Object.defineProperty(obj, key, {
// get(){
// }
// });
// }
const proxy = new Proxy(newModules, {
// target代表proxy操作的对象, keyName代表被操作的对象的属性名
async get(target, keyName){
//获取请求需要的参数配置
const params = target[keyName](target.meta ? target.meta:{});
//根据params进行对应的网络请求
const data = await startNetwork(params);
target.meta = null;
// 返回服务器响应结果
return data;
}
});
// 定义函数获取指定的数据
async function getData(keyName, meta=null){
if(meta){
proxy.meta = meta;
}
return await proxy[keyName];
}
export default getData;
4.在network文件夹下创建一个apis的文件夹,并且创建一个home.js文件
5.我们的网络请求可以在apis文件夹下创建不同页面的网络请求,比home页面可以创建home.js;我的页面可以创建my.js;
6.在home.js文件进行要对进行网络请求
const IP = "https://api.javamall.com.cn";
export default {
getChildren(){
return {
url:IP+"/buyer/goods/categories/0/children",
}
}
}
IP是网址;之后可以直接导出函数;如果多个网络请求如下代码:
const IP = "https://api.javamall.com.cn";
export default {
getChildren(){
return {
url:IP+"/buyer/goods/categories/0/children",
}
},
getMy(){
return {
url:IP + "/1020/2222/22211"
}
},
getAbout(){
return {
url:IP + "/789/363/323"
}
}
}
定义的每一个函数都是一个网络请求,定义的IP是网址前面的相同部分;(如果定义了IP或其他的变量名,记得要拼接哦)
7.上面是get请求如果是post的请求,代码如下
const IP = "https://api.javamall.com.cn";
export default {
getChildren(){
return {
url:IP+"/buyer/goods/categories/0/children",
}
},
getMy(){
return {
url:IP + "/1020/2222/22211"
}
},
getAbout(){
return {
url:IP + "/789/363/323"
}
},
postEmo(meta) {
return {
method: "POST",
url: '/exam/many/',
data: meta
}
},
}
如果是post的话,记得加入data数据,data数据是在调用时,需要传入的数据,(传不传数据取决你的请求需不需要上传参数)如果不需要可以不用写data
8.如果是DELETE删除数据操作的话,代码如下
const IP = "https://api.javamall.com.cn";
export default {
getChildren(){
return {
url:IP+"/buyer/goods/categories/0/children",
}
},
getMy(){
return {
url:IP + "/1020/2222/22211"
}
},
getAbout(){
return {
url:IP + "/789/363/323"
}
},
postEmo(meta) {
return {
method: "POST",
url: '/exam/many/',
data: meta
}
},
deleteEmo(index){
return{
url:'/exam/xmCheckO/'+index+"/",
method:"DELETE"
}
},
}
删除操作的配置就简单多了,直接传入一个数据拼接到你的网址上即可
9.当网络请求配置好了之后需要在Vue全局进行挂载
记得一定要挂载到全局里面
10.使用时,在你需要请求的页面进行数据请求;如home页面
使用时可以写在 crrated 这个生命周期里面,使用时需要配合async和await这两个promise的关键字修饰这个,当然也可以写在计算属性里面,
网络请求回来的数据res,使用时需要在data函数里面加一个数据进行接收赋值
定义一个tab为空,之后 在计算属性里面可以进行赋值:this.tab = res 即可
11.上面是对网络请求进行封装,如果你的页面路由跳转时 点两下它会报错,可以在router文件夹下的index.js里面加入这几行代码即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
}
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
}
以上就是网络请求的封装即使用,如果需要整个框架,
可以使用git指令 :git clone git@gitee.com:wuyi-io/front-end-architecture-vue.git
拉取 vue2+js 和 vue3+ts两个框架,
如果在使用过程中遇见问题可以留言