[前端] axios网络请求二次封装

原创

已于 2025-02-13 09:40:13 修改 · 630 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #axios #ts

于 2025-02-11 23:15:36 首次发布

一、场景描述

为什么要对axios网络请求进行二次封装?
解决代码的复用，提高可维护性。 —这个有两个方案：一个是二次封装一个是实例化。（设置一些公共的参数，然后进行请求）
为什么可以解决代码的复用：
这是最简单格式的代码，需要定义url和请求方式。

axios({
   
   
  method: "get",
  url: "http://codercba.com:9002/banner",
}).then(function (response) {
   
   
    console.log(response);
}).catch(function (error) {
   
   
    console.log(error);
});

封装之后的请求方式，减少了点代码

    hyRequest.get({
   
    url: "/banner" }).then((res) => {
   
   
      console.log(res);
      setImg(res.banners);
      console.log(img);
    });

Axios实例化的输出

const instance = axios.create({
   
   
  baseURL: "http://codercba.com:9002",
});

instance.get("banner").then((response) => {
   
   
  console.log("实例化请求输出");
  console.log(response);
})