1.為什麼做封裝？

方便程式碼整體呼叫、對請求做公共處理、個性化定製

2.別人已經封裝了很多，為什麼不直接修改使用？

• 封裝思路不適合自身專案
• 封裝後呼叫不方便

3.個人封裝demo

程式碼結構【基於vue】

基本思路

將所有的請求介面地址按照檔案分模組儲存，比如 request/module/user 使用者資訊相關模組【服務】

2.封裝方法、類。http://www.cppcns.com給所有請求繫結常用的請求方法，和對請求url上的路徑引數做處理

generateServer.js

import server from "../util/axiosConfig";
// 修改axios基本配置，請求配置
function request({
  url,method = "get",queryParm = {},body = {},pathParm = null,config = {},}) {
  const configAxios = {
    method,...con
 
程式設計客棧fig,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 {
  consthttp://www.cppcns.com
 
ructor(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;

3.整體暴露出去

使用

    import { userInfoServer } from "./request";
    .
    .
    .

    // 傳送請求
    userInfoServer.getUserName
      .getdata({
        queryParm: {
          id: 223,},})
      .then((res) => {
        console.log("res",res);
      });
    // 傳送請求
    userInfoServer.getUserName
      .postdata({
        body: {
          id: 223,})
      .then((res) => {www.cppcns.com
        console.log("res",res);
      });
    // 傳送get請求,請求路徑帶引數
    userInfoServer.getUserList
      .getdata({
        queryParm: {
          id: 223,pathParm: {
          id: 567,res);
      });

總結：

上述的封nhaGBF裝，主要是對請求拆分比較細緻，便於維護。開發時也比較方便。對於新介面需求，只需要在對應模組增加URl配置和響應的生成器配置。便可以在業務程式碼裡面處理請求。對於路徑引數和請求體引數做了封裝，使用時不需要關心相應的配置。

上述程式碼沒有處理檔案上傳、get請求引數字串等情況。但是在對應的axios裡面增加配置即可。維護方便。

到此這篇關於專案中Axios二次封裝的文章就介紹到這了,更多相關Axios二次封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

程式碼git：git