react使用axios并实现二次封装

在react脚手架项目中安装axios
在这使用到了Cookies 顺手安装一个

yarn add axios js-cookie

在src下新建一个文件夹httpRequest，在里面新建index.js
封装内容如下：

import axios from "axios";
import Cookies from "js-cookie";
// 请求的时间
axios.defaults.timeout = 100000;
// 域名设置
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
console.log("当前域名设置：" + axios.defaults.baseURL);
console.log(
  Cookies.set(
    "access_token",
 "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE5Mzc0NjM1NDIsInVzZXJfbmFtZSI6IjEzOTEx"
  )
);
/**
 * http request 拦截器
 */
axios.interceptors.request.use(
  (config) => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      "Content-Type": "application/json",
      Authorization: Cookies.get("access_token"),
    };
    // 请求前处理任意逻辑

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * http response 拦截器
 */
axios.interceptors.response.use(
  (response) => {
    // 在返回值里面处理任意逻辑
    return response;
  },
  (error) => {
    console.log("请求出错：", error);
  }
);

//处理请求并返回promise对象
// eslint-disable-next-line import/no-anonymous-default-export
export default function (fecth, url, param) {
  return new Promise((resolve, reject) => {
    // eslint-disable-next-line default-case
    switch (fecth) {
      case "get":
        get(url, param)
          .then((data) => {
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
        break;
      case "post":
        post(url, param)
          .then((data) => {
            resolve(data);
          })
          .catch((err) => {
            reject(err);
          });
        break;
    }
  });
}

/**
 * 封装get方法
 */
function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

/**
 * 封装post请求
 */
function post(url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

为了方便管理接口，我在src下新建一个文件夹request-apis/index.js，统一管理接口

export const getArticleList = (data) => {
  return request("post", "/apis/demo/home/list1", data);
};

export const getArticleList2 = (data) => {
  return request("post", "/apis/demo/home/list2", data);
};

然后在页面中可以直接引入和使用，示例：

import { getArticleList,getArticleList2 } from "@/request-apis/index.js";

//在生命周期中调用
componentDidMount() {
    getArticleList({
      id: 123,
    }).then(
      (res) => {
      	console.log("请求成功结果",res)
      },
      (err) => {
        console.log("请求失败",err);
      }
    );
  }