快捷導(dǎo)航

項(xiàng)目中Axios二次封裝實(shí)例Demo

更新時(shí)間：2021年06月08日 11:41:14 作者：豐子楷

vue項(xiàng)目經(jīng)常會(huì)用到axios來(lái)請(qǐng)求數(shù)據(jù),那么首先肯定需要對(duì)這個(gè)請(qǐng)求方法進(jìn)行一個(gè)二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下

1.為什么做封裝？

方便代碼整體調(diào)用、對(duì)請(qǐng)求做公共處理、個(gè)性化定制

2.別人已經(jīng)封裝了很多，為什么不直接修改使用？

封裝思路不適合自身項(xiàng)目
封裝后調(diào)用不方便

3.個(gè)人封裝demo

代碼結(jié)構(gòu)【基于vue】

基本思路

將所有的請(qǐng)求接口地址按照文件分模塊存儲(chǔ)，比如 request/module/user 用戶信息相關(guān)模塊【服務(wù)】

2.封裝方法、類。給所有請(qǐng)求綁定常用的請(qǐng)求方法，和對(duì)請(qǐng)求url上的路徑參數(shù)做處理

generateServer.js

import server from "../util/axiosConfig";
// 修改axios基本配置，請(qǐng)求配置
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:
      // 請(qǐng)求方法 '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;

3.整體暴露出去

使用

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

    // 發(fā)送請(qǐng)求
    userInfoServer.getUserName
      .getdata({
        queryParm: {
          id: 223,
        },
      })
      .then((res) => {
        console.log("res", res);
      });
    // 發(fā)送請(qǐng)求
    userInfoServer.getUserName
      .postdata({
        body: {
          id: 223,
        },
      })
      .then((res) => {
        console.log("res", res);
      });
    // 發(fā)送get請(qǐng)求,請(qǐng)求路徑帶參數(shù)
    userInfoServer.getUserList
      .getdata({
        queryParm: {
          id: 223,
        },
        pathParm: {
          id: 567,
        },
      })
      .then((res) => {
        console.log("res", res);
      });

總結(jié)：

上述的封裝，主要是對(duì)請(qǐng)求拆分比較細(xì)致，便于維護(hù)。開(kāi)發(fā)時(shí)也比較方便。對(duì)于新接口需求，只需要在對(duì)應(yīng)模塊增加URl配置和響應(yīng)的生成器配置。便可以在業(yè)務(wù)代碼里面處理請(qǐng)求。對(duì)于路徑參數(shù)和請(qǐng)求體參數(shù)做了封裝，使用時(shí)不需要關(guān)心相應(yīng)的配置。

上述代碼沒(méi)有處理文件上傳、get請(qǐng)求參數(shù)字符串等情況。但是在對(duì)應(yīng)的axios里面增加配置即可。維護(hù)方便。

到此這篇關(guān)于項(xiàng)目中Axios二次封裝的文章就介紹到這了,更多相關(guān)Axios二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

代碼git：git

您可能感興趣的文章: