项目中Axios二次封装的示例分析

这篇文章主要介绍项目中AxiOS二次封装的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1.为什么做封装？

方便代码整体调用、对请求做公共处理、个性化定制

2.别人已经封装了很多，为什么不直接修改使用？

• 封装思路不适合自身项目

• 封装后调用不方便

3.个人封装demo

代码结构【基于Vue】

基本思路

将所有的请求接口地址按照文件分模块存储，比如 request/module/user 用户信息相关模块【服务】

封装方法、类。给所有请求绑定常用的请求方法，和对请求url上的路径参数做处理

generateServer.js

import server from "../util/axiosConfig";// 修改axios基本配置，请求配置function request({  url,  method = "get",  queryParm = {},  body = {},  pathParm = null,  config = {},}) {  const configAxios = {    method,    ...config,    url: dealRequestUrl(url, pathParm),  };  switch (method) {    case "get":      configAxios.params = queryParm;      break;    default:      // 请求方法 'PUT', 'POST', 和 'PATCH'      configAxios.data = body;      break;  }  console.log('configAxios', configAxios)  return server(configAxios);}function dealRequestUrl(url, pathParm) {  if (!pathParm) return url;  let dealurl = url;  Object.keys(pathParm).forEach((ele) => {    dealurl = dealurl.replace(`{${ele}}`, pathParm[ele]);  });  return dealurl;}class GenerateServer {  constructor(url) {    this.url = url;  }  getdata(parm) {    console.log('parm', parm)    return request({ ...parm, method: "get", url: this.url });  }  postdata(parm) {    return request({ ...parm, method: "post", url: this.url });  }  deletedata(parm) {    return request({ ...parm, method: "delete", url: this.url });  }}export default GenerateServer;

整体暴露出去

使用

import { userInfoServer } from "./request";    .    .    .    // 发送请求    userInfoServer.getUserName      .getdata({        queryParm: {          id: 223,        },      })      .then((res) => {        console.log("res", res);      });    // 发送请求    userInfoServer.getUserName      .postdata({        body: {          id: 223,        },      })      .then((res) => {        console.log("res", res);      });    // 发送get请求,请求路径带参数    userInfoServer.getUserList      .getdata({        queryParm: {          id: 223,        },        pathParm: {          id: 567,        },      })      .then((res) => {        console.log("res", res);      });

以上是“项目中Axios二次封装的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！