1. Why encapsulate?

  • It is convenient to call the whole code, do common processing to the request, and customize

2. Others have encapsulated a lot, why not directly modify use?

  • Encapsulating ideas is not suitable for their own projects
  • It is not convenient to call after encapsulation

3. Personal package demo

Code structure [VUE based]

The basic idea

  1. Store all request interface addresses according to file modules, such as request/module/user user information related module [service]

2. Encapsulate methods and classes. Bind all requests to the usual request methods and handle the path parameters on the request URL

generateServer.js

import server from ".. /util/axiosConfig";
// Modify axios basic configuration, request configuration
function request({
  url,
  method = "get",
  queryParm = {},
  body = {},
  pathParm = null,
  config = {},
}) {
  constconfigAxios = { method, ... config,url: dealRequestUrl(url, pathParm),
  };
  switch (method) {
    case "get":
      configAxios.params = queryParm;
      break;

    default:
      // Request methods 'PUT', 'POST', and '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)
    returnrequest({ ... parm,method: "get".url: this.url });
  }
  postdata(parm) {
    returnrequest({ ... parm,method: "post".url: this.url });
  }
  deletedata(parm) {
    returnrequest({ ... parm,method: "delete".url: this.url }); }}export default GenerateServer;

Copy the code

3. Total exposure

use

    import { userInfoServer } from "./request"; .// Send the request
    userInfoServer.getUserName
      .getdata({
        queryParm: {
          id: 223,
        },
      })
      .then((res) = > {
        console.log("res", res);
      });
    // Send the request
    userInfoServer.getUserName
      .postdata({
        body: {
          id: 223,
        },
      })
      .then((res) = > {
        console.log("res", res);
      });
    // Send a get request with parameters
    userInfoServer.getUserList
      .getdata({
        queryParm: {
          id: 223,},pathParm: {
          id: 567,
        },
      })
      .then((res) = > {
        console.log("res", res);
      });
Copy the code

Summary: the above encapsulation, mainly on the request split more detailed, easy to maintain. Development is also more convenient. For the new interface requirements, only the URl configuration and the response generator configuration need to be added to the corresponding module. The request can be processed within the business code. The path parameters and request body parameters are encapsulated, and the corresponding configuration is not needed when using them.

The above code does not handle file uploads, get request parameter strings, and so on. But add the configuration to the corresponding AXIOS. Easy maintenance.

Git: git