javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > axios网络请求降低耦合度

关于封装axios网络请求降低代码耦合度详解

作者:不会写前端的小鱼

在项目中直接使用Axios或其他第三方库来发送网络请求获取数据时,会导致代码与网络请求的逻辑耦合度过高,导致难以维护,所以本文将讲解如何将网路请求的代码进行封装来进行解耦操作,文中通过代码示例和图文讲解的非常详细,需要的朋友可以参考下

引言

理解耦合度

Axios概述

Axios 是一个流行的用于发起 HTTP 请求的 JavaScript 库。它提供了一种简洁、灵活且易于使用的方式来处理网络请求,并且可以在浏览器和Node.js环境中使用。

以下是 Axios 的一些主要功能:

Axios 成为流行的发起 HTTP 请求的工具有以下原因:

总而言之,Axios 是一个功能强大、易于使用且受欢迎的用于发起 HTTP 请求的工具,它提供了许多便捷的功能和良好的开发体验,使得处理网络请求变得更加简单和高效。

封装Axios

import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";

class HYRequest {
  // 创建构造函数
  constructor(baseURL, timeout) {
    // 创建instance实例
    this.instance = axios.create({
      baseURL,
      timeout,
    });
    // 配置拦截器,对获取数据进行响应
    this.instance.interceptors.response.use(
      (res) => {
        return res.data;
      },
      (err) => {
        return err;
      }
    );
  }

  // request请求
  request(config) {
    return this.instance.request(config);
  }

  // 配置get请求方法
  get(config) {
    return this.request({ ...config, method: "get" });
  }

  // 配置post请求方法
  post(config) {
    return this.request({ ...config, method: "post" });
  }
}

const hyRequest = new HYRequest(BASE_URL, TIMEOUT);

export default hyRequest;

这里通过类的内聚性将网络请求的逻辑汇集到一起,用axios.create函数创建instance实例,构造函数接收baseUrltimeout来配置instance,通过interceptor拦截器拦截response结果,在通过配置requestgetpost实现对Axios的调用来完成网络请求,最后用创建好的类来创建一个实例,接收的参数为在config文件中配置好的基本选项,然后导出这个实例即可在项目代码中进行使用。

export const BASE_URL = "http://codercba.com:1888/airbnb/api";

export const TIMEOUT = 10000;

这里简单配置request的基本选项来方便我们发送网络请求

import hyRequest from "./request";

export default hyRequest;

这里是services文件夹的统一导出出口,方便进行代码维护

使用这里封装的类进行网络请求

import React, { memo, useEffect } from "react";
import hyRequest from "@/services";

const Home = memo(() => {
  // 网络请求的代码
  useEffect(() => {
    hyRequest.get({ url: "/home/highscore" }).then((res) => {
      console.log(res);
    });
  }, []);

  return <div>Home</div>;
});

export default Home;

这里在home组件中先进行导入hyRequest,即可发送网络请求,配置config参数,传入{ url: "/home/highscore" }来发送网络请求。

这便是通过封装好的hyRequest类发送网络请求得到的结果

总结

封装 Axios 的好处:

结束语

通过封装Axios来降低项目代码对于Axios的直接依赖,即使后面要更换使用网络请求的第三方库,也可以更加方便的修改和维护代码,在编写项目的时候我们也应该多应用这种思路,合理抽取代码逻辑,使代码更容易维护,提高代码复用性。

以上就是关于封装axios网络请求降低代码耦合度详解的详细内容,更多关于axios网络请求降低耦合度的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文