vue2+js封装网络请求

 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两个框架，

如果在使用过程中遇见问题可以留言